On this page, how are the <img> references accomplished in the markup? The style sheet has [src] selectors, but I'm lost (or stupidly uninformed).
How is the CSS letting the HTML know where the image is?
<!doctype html>
<title>Slideshow</title>
<link href=s.css rel=stylesheet>
<ul>
<li><img src=1>
<li><img src=2>
<li><img src=3>
<li><img src=4>
</ul>
#-webkit-keyframes f {
0% { opacity:0; }
12% { opacity:1; -webkit-transform:scale(1.03) }
25% { opacity:1; -webkit-transform:scale(1.06) }
37% { opacity:0; -webkit-transform:scale(1.30) }
100% { opacity:0; } }
#-moz-keyframes f {
0% { opacity:0; }
12% { opacity:1; -moz-transform:scale(1.03) }
25% { opacity:1; -moz-transform:scale(1.06) }
37% { opacity:0; -moz-transform:scale(1.30) }
100% { opacity:0; } }
body { background:#f0f0eb }
ul, [src] { position:absolute }
ul { overflow:hidden;
top:50%;
left:50%;
width:650px;
height:300px;
margin:-200px 0 0 -340px;
padding:0;
list-style:none;
border:15px solid #fff;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2) }
[src] { opacity:0;
-webkit-animation:f 12s linear infinite; -moz-animation:f 12s linear infinite }
[src="2"] { -webkit-animation-delay:3s; -moz-animation-delay:3s }
[src="3"] { -webkit-animation-delay:6s; -moz-animation-delay:6s }
[src="4"] { -webkit-animation-delay:9s; -moz-animation-delay:9s }
It's quite simply really - they're actually valid URLs, e.g.
<img src=4>
Is a relative link, pointing to:
http://playground.deaxon.com/css/slideshow/4
Or:
The "common style" of how the HTML might be formed is:
<ul>
<li><img src="1"></li>
<li><img src="2"></li>
<li><img src="3"></li>
<li><img src="4"></li>
</ul>
Not:
<ul>
<li><img src=1>
<li><img src=2>
<li><img src=3>
<li><img src=4>
</ul>
I think it's the lack of " marks that's confusing you.
Although, as #Wesley points out, this is also perfectly valid HTML (save for the missing alt tags).
Related
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 tried to make one button fade in then the other follow up. Is there any way that i can achieve wat i trying to do?
if there is way or any article, please help me know how to make one by one button animate at a time when window load?
HTML
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
</center>
</ul>
</font>
CSS
div header{
width:100%;
height:50px;
top:50px;
position:fixed;}
header .image{
height:110px;
width:110px;
opacity:0;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 2s;
-o-animation: fadein 2s;
animation-timing-function:linear;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;}
#header .ul{
list-style-type: none;
position:fixed;
top:17px;
width:100%;}
header .li {
height:110px;
width:110px;
padding:1px;
display:inline;
z-index:1;}
#header .li a{
text-decoration:none;
height:110px;
width:110px;}
//Fade in effect
#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;}}
Javascript
$(window).load(function() {
$("#header.image").fadeIn("fast");});
here the demo : http://jsfiddle.net/pkjfgfpf/
Sorry for the bad english, english is not my native language.
Thank you so much for your help.
The second argument to the fadeIn function is a function to call once the animation is complete. You can use this to chain animations to only happen after a previous animation is complete. See the fadeIn documentation for details.
HTML:
<img class="image" id="img1" src="imageUrl.filetype" />
<img class="image" id="img2" src="imageUrl.filetype" />
<img class="image" id="img3" src="imageUrl.filetype" />
JQuery:
$("#img1").fadeIn("slow", function() {
$("#img2").fadeIn("slow", function() {
$("#img3").fadeIn("slow");
});
});
CSS:
.image {
display: none;
}
Example JSFiddle (with all non-relevant parts removed)
Probably this could be your solution, Adjust it in your code (see the example here http://jsfiddle.net/nepal12/8jjooaox/)
// HTML
<div id="images">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
// Css
div#images { font-size: 0; background: #000; }
div#images img { width: 50%; height: auto;
opacity: 0; transition: .8s opacity; }
div#images img.visible { opacity: 1; }
// Javascript
<script>
var images = document.querySelectorAll("#images img"), i = 1;
Array.prototype.forEach.call(images, function(images) {
setTimeout(function(){ images.classList.add("visible") }, 700*i)
i++;
})
</script>
Change this:
$('#header.image').fadeIn('fast');
To:
$('.image').each(function(index,domEle){
setTimeout(function ( ) {
if(domEle.style.webkitAnimationPlayState!=undefined && domEle.style.webkitAnimationPlayState != null)
{
domEle.style.webkitAnimationPlayState = 'running'
}
if(domEle.style.mozAnimationPlayState!=undefined && domEle.style.mozAnimationPlayState != null)
{
domEle.style.mozAnimationPlayState = 'running'
}
if(domEle.style.oAnimationPlayState!=undefined && domEle.style.oAnimationPlayState != null)
{
domEle.style.oAnimationPlayState = 'running'
}
if(domEle.style.msAnimationPlayState!=undefined && domEle.style.msAnimationPlayState != null)
{
domEle.style.msAnimationPlayState = 'running'
}
if(domEle.style.animationPlayState!=undefined && domEle.style.animationPlayState != null)
{
domEle.style.animationPlayState = 'running'
}
},index*2000);
});
At your CSS styles simply add the following:
header .image{
animation-play-state:paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
}
sample Fiddle http://jsfiddle.net/pkjfgfpf/
I have five buttons in the UI with their respective inner box shadows. I want them to rotate individually when hovered upon. Now when I hover over one even the adjacent button is also rotating accordingly . And also the inner shadow should make a smooth transition inside the buttons ? Why is not that happening? Where am I mistaken?
http://jsfiddle.net/EP3Ps/
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
//
}
.Next_Class
{
//
}
.Prev_Class
{
//
}
ul.Round_Buttons
{
position:relative;
left:40%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:#d1bfbf;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border-style:solid;
cursor:pointer;
box-shadow:inset 1px 1px 1px 1px #f00;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
ul.Round_Buttons li:hover
{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
}
#-webkit-keyframes rotate
{
from
{
transform : rotate(0deg);
}
to
{
transform :rotate(-360deg);
}
}
#keyframes rotate
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(-360deg);
}
}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1st_Round">1</li>
<li id="2nd_Round">2</li>
<li id="3rd_Round">3</li>
<li id="4th_Round">4</li>
<li id="5th_Round">5</li>
</ul>
</div>
</body>
</html>
You are using keyframes not correctly.
Also, to make shadows changed you should add rule for new shadow on :hover.
It should be something like this:
ul.Round_Buttons li:hover
{
animation:rotate 1s;
-webkit-animation:rotate 1s;
-moz-animation:rotate 1s;
box-shadow:inset 1px 1px 1px 10px #f00;
}
see updated fiddle
This is a simple website for a school project. I've had trouble with the CSS animation for an image slider at the home page. It refuses to animate, and checking with browser website inspectors show that the rule is not being "computed" (applied?) to the image.
Here is the code for the page:
<!DOCTYPE html>
<head>
<title>Foo Bar Lorem Ipsum IS-3 | Home</title>
<link rel="stylesheet" href="stylesheets\home.css">
</head>
<body>
<div id="wrapper">
<header>
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</div>
<img src="images\header.png">
<header>
<div class="slider">
<ul>
<li><img src="images\law1.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\law2.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\law3.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\blood1.JPG" width="900" height="675" title="SLC Blood
Drive "/> </li>
<li><img src="images\blood2.JPG" width="900" height="675" title="SLC Blood
Drive"/> </li>
<li><img src="images\blood3.JPG" width="900" height="675" title="SLC Blood
Drive"/> </li>
<li><img src="images\interview1.JPG" width="900" height="675" title="SLC
Interview"/> </li>
<li><img src="images\interview3.JPG" width="900" height="675" title="SLC
Interview"/> </li>
<li><img src="images\interview4.JPG" width="900" height="675" title="SLC
Interview"/> </li>
</ul>
</div>
</header>
<div id="main">
<h1>
Welcome to the Foo Website
</h1>
<hr />
<p>
Welcome to the Foo
</p>
<p>
Lorem Ipsum
</p>
<p>
Hello World
</p>
</div>
</body>
</html>
And for the CSS:
body
{
background-image:url("../images/bg.png");
}
#font-face
{
font-family: Interstate;
src:url("../fonts/Interstate.ttf");
}
#wrapper
{
position:relative;
margin:auto;
width:900px;
background-color:#fcfcfc;
}
#wrapper header img
{
display:block;
margin-left:auto;
margin-right:auto;
}
#navbar
{
position:fixed;
}
#navbar ul
{
list-style-type:none;
margin:0;
padding:0;
}
#navbar li
{
display:inline;
float:left;
}
#navbar a
{
display:block;
width:225px;
font-family:Interstate, Segoe UI, sans-serif;
text-align:center;
}
#navbar a:hover
{
}
#main
{
margin-left:auto;
margin-right:auto;
padding:0;
}
#main h1
{
font-family:Interstate, Segoe UI;
text-align:center;
color:#6f273d;
}
#main p
{
font-family:Interstate, Segoe UI, sans-serif;
text-align:justify;
margin-left:8px;
margin-right:8px;
}
#main hr
{
color:#6f273d;
background-color:#6f273d;
}
header .slider
{
overflow:hidden;
}
header .slider ul
{
width:8100px;
margin:0;
padding:0;
position:auto;
cursor:arrow;
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
header .slider ul:hover
{
animation-play-state:paused;
}
header .slider ul li
{
list-style:none;
float:left;
margin:0;
position:relative
}
#keyframes "slide"
{
0%
{
left:0;
}
11%
{
left:-900px;
}
22%
{
left:-1800px;
}
33%
{
left:-2700px;
}
44%
{
left:-3600px;
}
55%
{
left:-4500px;
}
66%
{
left:-5400px;
}
77%
{
left:-6300px;
}
88%
{
left:-7200px;
}
100%
{
left:0;
}
}
I ran through the whole CSS and HTML file through W3s CSS and HTML validator, but no dice. They don't show any errors. Can anyone help with this?
You need to add -webkit-animation in order for it to work on chrome and safari.
You need the browser specific prefixes:
/*all those who support it*/
#keyframes /*....*/
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
/*Chrome and Safari*/
#-webkit-keyframes /*....*/
-webkit-animation: slide 15s;
-webkit-animation-duration:15s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-out;
/*Firefox*/
#-moz-keyframes /*....*/
-moz-animation: slide 15s;
-moz-animation-duration:15s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-out;
/*Opera*/
#-o-keyframes /*....*/
-o-animation: slide 15s;
-o-animation-duration:15s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:ease-out;
You can use a tool like compass ( http://compass-style.org/ ) that writes all those vendor specific css rules automatically, you just write:
#include transition();
Also, this will not work in any browser on earth, refer to the caniuse table: http://caniuse.com/#search=animation
In addition to adding browser prefixes, you need remove the quotes around your animation's name. Note the latest versions of Firefox no longer require the -moz- prefix, but you may want to add it any way for those that haven't updated in a long time.
#keyframes "slide"
{ ...
Should be:
#keyframes slide
{ ...
You can also save a little time by using the animation shorthand property.
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
Could be:
animation: slide 15s infinite ease-out;
See the MDN documentation for CSS animations for further information.
I'm trying to build a photo gallery with stacked photos for each album. When you hover the album I want 1 image to rotate 20 left, one to rotate 20 right so I see bits of 3 images at the same time.
I think the problem is that the hover signals are stuck on the topmost image in the stacks. I'll post what I have tried below. Any ideas? Is it possible?
<!DOCTYPE html>
<head>
<title>Just-CSS: Rotate stacked images on hover</title>
<style>
body {
background-color: black;
color: white;
padding: 20px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
position: absolute;
}
img { -webkit-transition: all 0.2s; }
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
img { border: 4px solid white; }
img.red { background-color: red; }
img.green { background-color: green; }
img.blue { background-color: blue; }
</style>
</head>
<body>
<ul class="img-stack">
<li><img class="red" width="100" height="100" src=""></li>
<li><img class="green" width="100" height="100" src=""></li>
<li><img class="blue" width="100" height="100" src=""></li>
</ul>
</body>
</html>
I know you can do it with JavaScript but I'm just playing with CSS so please no JavaScript :)
Just change this:
img:hover.green {-webkit-transform: rotate(-20deg);}
img:hover.blue {-webkit-transform: rotate(20deg);}
to this:
ul:hover img.green {-webkit-transform: rotate(-20deg);}
ul:hover img.blue {-webkit-transform: rotate(20deg);}
Because you can only activate one :hover selector at a time (as far as I'm aware), just capture the hover on the parent element.
I guess you should use your ul.img-stack as a wrapper to do it. Trigger the :hover event on the album itself, and not on each picture.
ul.img-stack:hover .green {-webkit-transform: rotate(-20deg);}
ul.img-stack:hover .blue {-webkit-transform: rotate(20deg);}
img:hover.green {-webkit-transform: rotate(-20deg);}
to
img.green:hover {-webkit-transform: rotate(-20deg);}