I'm given the following task,
Actual html which I have: Two images are stacked on top of each other.(below html) when the user hovers on the foreground image, as per the CSS rules opacity will be transitioned to 0 in 4 seconds and this keeps happening in a cycle.
Fiddle
Modification I have to do: Now I have to perform the same for 5 images. I've tried doing the same as below, could not succeed(See second code snippet). Any hints as to how this can be done only using css ? thanks
Fiddle2
<!-- Melting one image into another using CSS3. -->
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
</div>
</body>
</html>
What I've tried
<html>
<head>
<meta charset = "utf-8">
<title>Melting Images</title>
<style type = "text/css">
#cover
{
position: relative;
margin: 0 auto;
}
#cover img
{
position: absolute;
left: 0;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
#cover img.top:hover
{ opacity:0; }
#cover img.top1:hover
{ opacity:0; }
#cover img.top2:hover
{ opacity:0; }
#cover img.top3:hover
{ opacity:0; }
</style>
</head>
<body>
<div id = "cover">
<img class = "bottom" src = "jhtp.png" alt = "Java 9e cover">
<img class = "top" src = "jhtp8.png" alt = "Java 8e cover">
<img class = "top1" src = "jhtp1.png" alt = "Java 8e cover">
<img class = "top2" src = "jhtp2.png" alt = "Java 8e cover">
<img class = "top3" src = "jhtp3.png" alt = "Java 8e cover">
</div>
</body>
</html>
You can do that only in CSS, and applying the styles to the container and the children, whatever this are.
I have set an example using div as children, but you can modify it to whatever you want
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
CSS
.container{
width: 80px;
height: 80px;
position: relative;
}
.container div {
position: absolute;
width: 100%;
height: 100%;
font-size: 60px;
opacity: 0;
}
.container div:nth-child(1) {
background-color: yellow;
opacity: 1;
}
.container:hover div {
-webkit-animation: anim 5s infinite;
animation: anim 5s infinite;
}
.container div:nth-child(2) {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.container div:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
.container div:nth-child(4) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.container div:nth-child(5) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#-webkit-keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes anim {
0%, 15% {opacity: 1;}
20%, 95% {opacity: 0;}
100% {opacity: 1;}
}
fiddle
As hovering is a binary process (you're either hovering an element or you're not), I'm afraid this is not possible with CSS only. You write some JS code that will be also triggeren on hover and that will take care of replacing images below and sorting them. However, that seems like an ugly mishmash.
Maybe you could do it using keyframes, but again, you'd need a way to trigger an animation for each image. I'm talking about building a 20s animation for each image and then modifying the opacity value for each in 4 second intervals. But again, seems like too much effort.
So, I'd strongly suggest you write a simple JS image fader that will handle both the image sorting and fade animations at a slight cost of performance.
If you still want to use as much CSS as possible, go with the keyframes, and set a JS listener on the container element which will add a class to each image - that class would trigger the CSS animation for each image. You'll have to repeat the first image and put it at the bottom. The animation would make the 1st image transparent by the second 4, 2nd image by second 8, etc...
Related
I have to make an animation of 5 balls of different colors that move in a wave. I am struggling with the different starting positions of the balls as the instructions say. And the position and color of the first-child goes last in the sequence of 5 balls for some reason.
Use this color palette (Links to an external site.) to style the div elements with the circle class as per the reference above. Each circle should be 50px in diameter.
Implement an animation so that the circles move up 100px, then move back down to their original position. The movement should have a duration of 1 second. Each ball should start the animation at a slightly different point in time so that they appear slightly out of phase. The overall effect is that they appear as an infinite looping ‘wave’.
Here is the HTML
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color:antiquewhite;
animation: circle 1s linear infinite;
float: left;
margin: 5px;
}
.circle:first-child {animation-delay: -0.1s; background: #EF476F}
.circle:nth-child(2) {animation-delay: -0.2s; background: #FFD166;}
.circle:nth-child(3) {animation-delay: -0.4s; background: #06D6A0;}
.circle:nth-child(4) {animation-delay: -0.6s; background: #118AB2;}
.circle:nth-child(5) {animation-delay: -0.8s; background: #073B4C;}
#keyframes circle {
0%, 100% {transform: translateY(0px);}
50% {transform: translateY(100px);}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
</body>
</html>
Your problem is the nth-child(). Your first circle element is actually the second child element in the container, because the first child element is the <h2>.
The nth-child() does not distinct by class so this method won't work.
However, the solution is found in another, more fitting selector nth-of-type(). This selector also can't distinguish by class name, but can by element type.
.circle {
height: 50px;
width: 50px;
border-radius: 50%;
background-color: antiquewhite;
animation: circle 1s ease-in-out infinite; /* changed it to ease-in-out just for better visual result */
float: left;
margin: 5px;
}
.circle:nth-of-type(1) { animation-delay: -0.1s; background: #EF476F }
.circle:nth-of-type(2) { animation-delay: -0.2s; background: #FFD166; }
.circle:nth-of-type(3) { animation-delay: -0.4s; background: #06D6A0; }
.circle:nth-of-type(4) { animation-delay: -0.6s; background: #118AB2; }
.circle:nth-of-type(5) { animation-delay: -0.8s; background: #073B4C; }
#keyframes circle {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(100px); }
}
<h1>CSS Challenges</h1>
<section>
<h2>Challenge 3</h2>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</section>
The selector will find the element with class circle and find the nth of its type - in this case div. If you add another element, like <span class"circle"></span>, it will get the styles of .circle:nth-of-type(1) because this is the first span with this class.
I've been trying to find a solution for a while now but none seem to work.
The issue I am having happens when navigating to any and all the pages on the site- it's very annoying.
While I would expect that site images take time to load, this loading affects my navigation bar and the loading of my site's logo. For the time that it takes each page to load, my site's logo is completely absent- this causes my navigation bar to be shifted all the way up until the logo appears. This usually takes about a split second but it's also completely dependent on the user's internet connection).
How do I prevent this from happening? This causes my entire site to "bounce" when navigating, with all the content being shifted up for a brief moment while the logo is absent.
Give your image tag an absolute height attribute. This will make the browser keep the img tag the height it should be and allow the elements to load in the proper place.
You can also try tweaking a loader to have the page load only when all of the elements in the page have loaded. Something as simple as this:
<!DOCTYPE html>
<html>
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
With some modification, can help the UI experience!
Source: W3 Schools
Hope it helps!
I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
I have a simple CSS animation on my site, where I want to show 5 divs showing one at a time in a row.
Everything works fine, but I want to make a trigger to that animation, when the user scrolls to that particular section on my site(now the animation starts when the page loads).
Here is my code:
<div id="space"></div>
<div id="container">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
</div>
CSS:
#space {
height: 700px;
background-color: blue;
}
#container img {
opacity: 0;
}
#keyframes fdsseq {
100% { opacity: 1; }
}
#container img {
animation: fdsseq .5s forwards;
}
#container img:nth-child(1) {
animation-delay: .5s;
}
#container img:nth-child(2) {
animation-delay: 1s;
}
#container img:nth-child(3) {
animation-delay: 1.5s;
}
#container img:nth-child(4) {
animation-delay: 2s;
}
#container img:nth-child(5) {
animation-delay: 2.5s;
}
https://jsfiddle.net/Lwb088x5/
You need JavaScript to do this.
In the example(s) below, a scroll event listener to attached, and the animate class is added to the #container element if the img elements are visible:
Updated Example
#container.animate img {
animation: animation .5s forwards;
}
document.addEventListener('scroll', function (e) {
var top = window.pageYOffset + window.innerHeight,
isVisible = top > document.querySelector('#container > img').offsetTop;
if (isVisible) {
document.getElementById('container').classList.add('animate');
}
});
Alternatively, you could also use jQuery as well:
Updated Example
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#container img').offset().top;
$('#container').toggleClass('animate', isVisible);
});
I have a CSS carousel that is working great thanks to a great coder on here, but as I am finishing up my project, I cannot make the images or text clickable in the slides. I have wrapped around the img, I have connect it to the text, and I cannot click anything, it just slides on its merry way. Below is the code:
.colorDissolve {
position: relative;
overflow: hidden;
width: 287px;
height: 430px;
background: #000000;
}
.colorDissolve .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: colorDissolve 24s linear infinite;
-moz-animation: colorDissolve 24s linear infinite;
-ms-animation: colorDissolve 24s linear infinite;
animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.colorDissolve .item:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.stars{
height: 220px;
background-color: rgba(11, 11, 44, 0.6);
position: absolute;
margin-left: 120px;
margin-top: -135px;
top:200px;
bottom:200px;
right:100px;
left:220px;
bottom: 143px;
color: #8df4fb;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
.space{
position:absolute;
top:100px;
bottom:100px;
left:390px;
color:#c30;
font-size:.9em;
padding:0.5em;
position:absolute;
right:10px;
left:10px;
text-align:right;
color:#fff;
background-color:rgba(0,0,0,0.75);
}
#-webkit-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-moz-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-ms-keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#keyframes colorDissolve {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
<div class="carousel colorDissolve">
<div class="item">
<a href="star.html">
<img src="images/stars.gif" />
</a>
<span class="stars">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="space.html">
<img src="images/galaxy.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="moon.html">
<img src="images/moons.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
<div class="item">
<a href="nebula.html">
<img src="images/nebulae.gif" />
</a>
<span class="space">
<h2>Science</h2>
<p>TEXT</p>
<h2>The new Style of Space</h2>
</span>
</div>
</div>
I also have put the link code by the text, around the headers, and there is no link option. I tried the z-index, and it still does not work, and I do not think it should go higher than my nav links, right? Are maybe my nav links somehow messing up my img links? I am not sure what I am missing, I have put the in the span sections as well, but I cannot get it to work. I also have links to facebook and twitter, but they do not interfere with anything. I am just a bit stuck here. I just cannot solve this problem.
EDIT: Ok, so I now have the links working for text, what I was able to do was use the z-index to put the linked text on top of the div layer and I can now click on those links as they are present. I obviously made the z-index ratio higher than the links in the footer, and it works great. The only issue I still have is getting the whole slide itself or just the picture itself to link or be clickable in its own right, as it pulls from another div layer, basically using my ul a attribute when I hover over the picture, which is not what I want it to do.
That's weird, for me it works correctly (only you forgot the first < tags for your item divs)
If you want a clickable entire div => change <div class="item"> to <a class="item">
If you want a clickable image inside div => wrap a tags around the img
If you want a clickable text inside div => wrap a tags around <span class="space">
If it doesn't work, you've probably made a typing mistake, because in this test:
http://jsbin.com/apuwal/2/edit , wherever I wrap the anchor tags, it works.
EDIT: Ah I got you now. I re-tested the code with a function alerting the href of a link when clicking on it. After some searching, it turned out, you have to scrap the position: absolute; from your classes .space (twice!) & .item. http://jsbin.com/apuwal/7/edit
This is because absolute positioning ignores the presence of other elements, and so your elements will all stack up at the same position and only one link will be clickable. If you wish to keep the position of your items absolute, you will either have to:
set different margins for your elements so they don't overlap
Use keyframes (dunno if this is possible, never tried) to change the z-index of the item with opacity > 0.5 or so
Set your items to display: none; when they finish fading out. (through Javascript/ jQuery)
Give the hidden elements a different margin when they fade out.
I know CSS sliders/faders are pretty sophisticated now, but the way I see it right now, the easiest solution would still be javascript