I got this banner thingy from a tutorial, but the thing is, instead of the banner continuing in loops, it resets instead. I don't want to use any javascript since we we're not yet tackling it in uni. Can anyone point out where I did wrong and how to fix it? Thanks.
Here are the images:
[1]
[2]
and this is the code I used
HTML:
<div class="photobanner">
<img class="first" src="images/scroll/ban.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner1.png" style="width:350px;height:233px;"/>
<img src="images/scroll/banner3.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner4.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner5.jpg" style="width:350px;height:233px;"/>
</div>
</div>
CSS:
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background-image:url(images/banner1takuya.jpg);
background-size: cover;
background-attachment: fixed;
}
#container {
width:865px;
height:auto;
margin:auto;
padding:0 0 30px 0;
background-image:url(images/bg.png);
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
You have the .photobanner width set to 3550px, but the sum of images' widths is 355*5=1775px only.
You need to add 5 more images of the same size and this will work correctly.
Related
I found loader CSS trick, and I want to put text or image into loader without rotation.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
animation: no-spin .5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I tried #keyframes no-spin for reverse rotation, but didn't work.
You'll want to add display:block on the <span>. A transform on display:inline will not work (as specified in the spec). In practice this boils down to using display:block or display:inline-block.
I've also modified the animation time of .no-spin to 1s, to match your spin animation speed.
This will give the illusion of not spinning, in actuality it's spinning with the same speed in the opposite direction.
.loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
text-align: center;
line-height: 50px;
margin: 10px auto;
font-size: 12px;
}
.loader > span {
display: block;
animation: no-spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes no-spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
Use the spin on a pseudo element
.loader {
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 10px auto;
font-size: 12px;
}
.loader::after {
content: '';
position: absolute;
top: 0; left: 0;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="loader">
<span>LOGO</span>
</div>
I have a webpage which has some css that makes an image appear from the left and move in slightly to the right. However this animation is done as soon as the page is loaded so it does not appear to move at all. I would like the animation to fire when the user scrolls down to the portion of the page where the image is located. How would I go about doing this? Here is my current code for the animation:
#-webkit-keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
#keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
.rotator{
text-decoration: none;
padding-right: 20px;
left: -10%;
position: absolute;
-webkit-animation: move 5s;
animation: move 5s;
}
.rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
and here is the html i put on the page:
<a class="rotator"><img src="img/lc.png" /></a>
Thanks in advance!
You could use JQuery to measure if the user has reached a certain point on the website. If so, then you should add a class which contains the animation.
JQuery:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
In the line if ($(document).scrollTop() == 200) is 200 equal to the y-coördinate of the element which should animate.
Example:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
body {
height: 2000px;
margin: 0px;
}
#block {
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border: 2px solid red;
margin: 200px auto;
}
.animate {
animation: spin 4s linear infinite;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="block">
Block
</div>
Your code doesn't render a animation... something is wrong there. I recommend you to find a piece of working code, and read it and adapt. For example this one, has a menu, but you can change all make it work for your purposes.
Check this example that works and re-use the code.
The menu bar slides down on page load, pure CSS.
header {
background: #666;
color: #fff;
height: 20px;
position: relative;
padding: 10px;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.5s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
display: inline-block;
margin-right: 20px
}
header ul li a {
color: #eee;
text-decoration: none;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
/* For aesthetics only */
body {
margin: 0;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.intro {
padding: 40px;
}
.intro h1 {
font: 200 1.7em Segoe UI, "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 200;
color: #666;
}
.intro p {
max-width: 600px;
}
<header>
</header>
<div class="intro">
</div>
I have a scrolling banner that will not work in IE. Works fine in Firefox, Chrome, and Opera though. Here is my HTML:
<div id="container">
<div class="photobanner">
<a class="first" href="http://www.site1.com" ><img src="/images/image1.jpg" alt="site1"></img></a>
<img src="/images/site2.jpg" alt="site2"></img>
<img src="/images/image3.jpg" alt="site3"></img>
<img src="/images/image4.jpg" alt="site4"></img>
</img>
<img src="/images/image2.jpg" alt="site2"></img>
</div>
</div>
It is my understanding that -ms-transform should work in IE9 and beyond but that doesn't seem to be the case, here is my CSS:
.photobanner {
width: 3805px;
}
.photobanner img {
height: 175px;
margin: 25px 0px 25px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
#-moz-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
Any ideas how I can get this to work???
Just remove the " quote from your #keyframes name. Like this:
#-webkit-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
#keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2545px;
}
}
http://jsfiddle.net/z5ep9hjk/1/
Also it won't run on IE 9 http://caniuse.com/#feat=css-animation Because it is not support animation property.
You have to remove the double quotes ( " ) from the #keyframes. It'll then work in IE11.
i am working on a Infinite Scrolling banner for a page but i am having issues with its output.
my html code is this: `e
<div class="header">
<img class="first" src="image-1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
<img src="image5.jpg" alt="" />
<img src="image6.jpg" alt="" />
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
</div>
</div>
and my CSS code is this:
`* {margin: 0; padding: 0;}
body {
background: url('background.jpg');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
when i run the html file i see the banner scrolling but i can see the other pictures as well that is not in the banner at the time..
i should be only getting 3 pictures moving at one time and all other pics hidden but they are showing as well..please help..
<!DOCTYPE html>
<html>
<head>
<title>Photo banner</title>
<style>
* {margin: 0; padding: 0;}
body {
background-color: #FF0000;
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Animated Photo Banner</h1>
<p>Lorem ipsum dolor...</p>
</header>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-5.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-6.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
</div>
</div>
</body>
</div>
I have implemented a CSS3 Animation for a Div-Element which has Header text and "Read more"-link. I'm using translateX function to animate the container from left to right of the screen.
The problem is that the "Read more"-link which has an anchor goes to unclickable while the box animation. But when the animation ends the anchor becomes clickable.
Can anyone help me finding the problem behind this?
HTML
<div>
<h3>Title1</h3>
<p class="sub-text">Title1 Desc </p>
<p class="read-more">Read More</p>
</div>
CSS
div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 27%;
width: 62%;
text-align: left;
background: rgba(0,0,0, 0.6) none repeat scroll 0 0;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
div h3 {
font-family: 'Roboto', sans-serif;
font-size: 3em;
padding: 0 25px;
margin: 30px 0px 5px 0px;
color: rgba(255,255,255,0.8);
}
div p.sub-text {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
padding: 5px 25px;
color: rgba(255,255,255,0.6);
margin: 0px;
}
div p.read-more {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
padding: 10px 25px 20px;
}
div p.read-more a {
padding: 10px 10px 10px 20px;
display: inline-block;
background: rgb(223, 75, 20);
text-decoration: none;
color: rgba(255,255,255,0.6);
margin: 0px;
font-weight: 700;
}
titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(300%);
}
8% {
opacity: 1;
-webkit-transform: translateX(10%);
}
17% {
opacity: 1;
-webkit-transform: translateX(5%);
}
19% {
opacity: 0;
-webkit-transform: translateX(-10%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
Working Sample is
http://jsfiddle.net/a4enq/
Why would you want to try and click the link whilst its moving?
Anyway, I believe that this is the default browser behavior (Chrome) because when you are using translate(X,Y,Z,3d) it creates a new layer of the elements moving and repaints the element you're moving and make everything position: relative and disables all anchors until the animation has stopped.
You could use margins or left position for the animation (so at to manipulate the DOM and not the renderer)
This way it will work but it will lose hardware accelerated benefits
http://jsfiddle.net/L5tv8/1/
#keyframes titleAnimation {
0% {
opacity: 0;
margin-left:300%;
}
8% {
opacity: 1;
margin-left:10%;
}
17% {
opacity: 1;
margin-left:5%;
}
19% {
opacity: 0;
margin-left:-10%;
}
25% { opacity: 1 }
100% { opacity: 1 }
}