I got a question regarding an image slider that I am creating from scratch. I want to create it from scratch due to the fact that I do not need a lot of extra properties which I could get from using external sliders.
I have the following setup:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
$( "#slide-right" ).click(function() {
$(".hold-1").addClass('first');
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
What I am trying to achieve is that whenever I press the right button the margin got shifted towards the left. But I need some kind of mechanism to detect that. Have anyone an idea on how I could implement that? I do not ask for full code implementations. Any guidance is already very helpfull.
To be short: desired setup: being able to navigate through the images with the left and right button by shifting the margin towards left and right.
For a JSFIDDLE DEMO: JSFIDDLE
You are only adding the class first to your first holder.. (.hold-1). You can add an additional variable (counter) and add it the following way:
$(".hold-" + counter +"").addClass('first');
Have a look below:
var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;
$( "#slide-right" ).click(function() {
$(".hold-" + counter +"").addClass('first');
counter = counter + 1;
});
.col-slider{
position:relative;
z-index:13;
margin-top:0px;
width:70%;
overflow:hidden;
height:174px;
background-color:yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin:0 15px;
float:left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
font-family: Titillium Web;
text-transform: uppercase;
font-weight:600;
display:inline-block;
width:85%;
text-align:center;
font-size:36px;
}
.col-slider-buttons a{
margin-right:10px;
display:inline-block;
margin-bottom:30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Hope it helped
I've added/changed these lines of code:
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
What it does: It counts the amount of elements that has both class' image-holder & first. Then i adds 1, to get the value of the hold- class we want to add our class to
var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');
});
.col-slider {
position: relative;
z-index: 13;
margin-top: 0px;
width: 70%;
overflow: hidden;
height: 174px;
background-color: yellow;
}
.image-holder {
width: 175px;
height: 174px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 15px;
float: left;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2 {
font-family: Titillium Web;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
width: 85%;
text-align: center;
font-size: 36px;
}
.col-slider-buttons a {
margin-right: 10px;
display: inline-block;
margin-bottom: 30px;
}
.first {
-webkit-animation: animateleft 1s ease-out forwards;
-moz-animation: animateleft 1s ease-out forwards;
-ms-animation: animateleft 1s ease-out forwards;
-o-animation: animateleft 1s ease-out forwards;
animation: animateleft 1s ease-out forwards;
}
#keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-moz-keyframes animateleft {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-webkit-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-ms-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
#-o-keyframes "animateleft" {
0% {
margin-left: 0px;
}
100% {
margin-left: -185px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
<a id="slide-left" href="#">Left</a>
<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
<div class="image-holder hold-1">
<h2>TEST 1</h2>
</div>
<div class="image-holder hold-2">
<h2>TEST 2</h2>
</div>
<div class="image-holder hold-3">
<h2>TEST 3</h2>
</div>
<div class="image-holder hold-4">
<h2>TEST 4</h2>
</div>
</div>
Related
When the smoke animation is finished, it stays a little on the bottom right. I don't want to see this and try to fix this.
How do I solve this problem? I showed the problems in the picture. Additionally, the smoke.mp4 link is below.
body
{
margin: 0;
padding: 0;
background:black;
}
section {
height: 100vh;
background: #000;
}
video {
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 5em;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="smoke.mp4" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
smoke video link: https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view
It looks like your video's last frame is not completely black. What you can do is listen for the ended event of the video and then hide it.
document
.querySelector('video')
.addEventListener('ended', function(e) {
e.target.style.display = 'none';
});
// ofcourse you could toggle a class that hides it
// instead of setting an inline style
body {
margin: 0;
padding: 0;
background: black;
}
section {
height: 100vh;
background: #000;
}
video {
width:100%;
height:100%;
object-fit: cover;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #ddd;
font-size: 8vw;
font-family: sans-serif;
letter-spacing: 0.2em;
}
h1 span {
display: inline-block;
animation: animate 1s linear forwards;
}
#keyframes animate {
0% {
opacity: 0;
transform: rotateY(90deg);
filter: blur(10px);
}
100% {
opacity: 1;
transform: rotateY(0deg);
filter: blur(0px);
}
}
h1 span:nth-child(1) {
animation-delay: 1s;
}
h1 span:nth-child(2) {
animation-delay: 1.5s;
}
h1 span:nth-child(3) {
animation-delay: 2s;
}
h1 span:nth-child(4) {
animation-delay: 2.5s;
}
h1 span:nth-child(5) {
animation-delay: 3s;
}
h1 span:nth-child(6) {
animation-delay: 3.75s;
}
h1 span:nth-child(7) {
animation-delay: 4s;
}
h1 span:nth-child(8) {
animation-delay: 4.5s;
}
<section>
<video src="https://drive.google.com/uc?export=download&id=1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK" autoplay muted></video>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
I want to create the letter z in animation.
In such a way that the first part (1) appears without delay with animation from left to right.
When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation.
When the second part (2) is down, the third part (3) will appear from left to right with animation.
The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late.
Thank you in advance for your cooperation.
#global{
width:200px;
position:relative;
cursor:pointer;
height:200px;
background-color: black;
padding: 1rem;
}
.mask{
position:absolute;
border-radius:2px;
overflow:hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane{
background:#ffffff;
width:400%;
height:100%;
position:absolute;
transform : translate3d(0px,0,0);
z-index:100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane{
z-index:2000;
animation: trans1 1s ease-in infinite 0s forwards;
-webkit-animation: trans1 1s ease-in infinite 0s forwards;
}
#middle .plane{
transform: translate3d(0px,0,0);
background: #bbbbbb;
animation: trans2 1s linear infinite 2s forwards;
-webkit-animation: trans2 1s linear infinite 2s forwards;
}
#bottom .plane{
z-index:2000;
animation: trans3 2s ease-out infinite 4s forwards;
-webkit-animation: trans3 2s ease-out infinite 4s forwards;
}
#top{
width:200px;
height:15px;
left:0;
z-index:100;
transform: skew(-15deg, 0);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#middle{
width:187px;
height:25px;
left:6px;
top:78px;
transform:skew(-15deg, -40deg);
-webkit-transform:skew(-15deg, -40deg);
-moz-transform:skew(-15deg, -40deg);
-ms-transform:skew(-15deg, -40deg);
-o-transform:skew(-15deg, -40deg);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#bottom{
width:200px;
height:15px;
top:159px;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2{
0% {
width: 0%;
left: 100%;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
This snippet thinks of things slightly differently.
Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.
That way aspects such as the lines not being visible to start with are dealt with.
#global {
width: 200px;
position: relative;
cursor: pointer;
height: 200px;
background-color: black;
padding: 1rem;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane {
z-index: 2000;
animation: trans1 3s ease-in infinite forwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 3s linear infinite forwards;
}
#bottom .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite forwards;
}
#top {
width: 200px;
height: 15px;
left: 0;
z-index: 100;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#middle {
width: 187px;
height: 25px;
left: 6px;
top: 78px;
transform: skew(-15deg, -40deg);
border-radius: 20px;
}
#bottom {
width: 200px;
height: 15px;
top: 159px;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1 {
0% {
width: 0%;
left: 0;
}
33.33% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2 {
0% {
width: 0%;
left: 100%;
}
33.33% {
width: 0%;
left: 100%;
}
66.66% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3 {
0% {
width: 0%;
left: 0;
}
66.66% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
I want to translateX text on the banner from left to right. I have taken a reference to animation from this site https://pereiraodell.com/
They are using jQuery/javaScript for animation. The same effect I want to have using CSS.
I am trying to replica same effect using CSS but mine was not as smooth as given in the reference.
In the referenced site, the text animation speed is gradually slowing down and the opacity setting works perfectly. I am not able to produce the same effect in my code. Maybe I am missing some breakpoints in keyframes. fiddle
I want to show this animation on hover so that when the user hovers out, the text should go back to its original place in the animation.
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner:hover .title{
animation: slideInRight 1s;
animation-fill-mode:forwards
}
.banner:hover .description{
animation: slideInRight 1s 80ms;
animation-fill-mode:forwards
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
Check Fiddle, Hope this solve your issue :)
Fiddle: http://jsfiddle.net/5vax1uce/68/
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px;
}
.title {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.description {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.banner:hover .title {
opacity: 1;
transform: translateX(0);
}
.banner:hover .description {
opacity: 1;
transform: translateX(0);
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
1st answer with animation
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards
}
.description {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards;
}
.banner:hover .title {
animation: slideInRight 1s;
animation-fill-mode: forwards
}
.banner:hover .description {
animation: slideInRight 1s 80ms;
animation-fill-mode: forwards
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 0.2;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
#keyframes slideOutLeft {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
opacity: 0.8;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(-100px);
opacity: 0
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
2nd answer with transition gives better results
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.description {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.banner:hover .title,
.banner:hover .description {
transform: translateX(0);
opacity: 1;
transition: all 1s ease-out;
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
Edit:
Here is the fix I have been talking about, I have applied the animation on the path .banner .content .title and .banner .content .description. I have edited your fiddle. I have made .content as display:none by default. When the mouseenter event is fired, the .content is changed to display:block and then the animation is applied. I hope it helps. I have updated the link to the fiddle.
$(".banner").mouseenter(function(){
$(".content").css("display","block");
});
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px;
display:none;
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner .content .title{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
.banner .content .description{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
#keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
Here is the link to your fiddle.
It was not working until inside the css script I did change the place of the #keyframe slideInRight {}, I put it before calling it then it worked for me.
I'm creating an animation effect (decreasing the height slowly) as part of a keyframes animation. The animation plays forwards once, but doesn't play backwards and doesn't play on subsequent times.
JSFiddle here - http://jsfiddle.net/shaaraddalvi/eLwcw22e/
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation 1s backwards;
-moz-animation: someanimation 1s backwards;
-ms-animation: someanimation 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
Scroll through the page to get the desired effect. (Tested currently on chrome, isn't working that well on Edge).
You can achieve this by adding another keyframe animation like this:
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#-webkit-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-moz-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-ms-keyframes someanimation2 {
from: { padding: 10px 0px; }
to: { padding: 100px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation2 1s backwards;
-moz-animation: someanimation2 1s backwards;
-ms-animation: someanimation2 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
You can also check this Fiddle
You can achieve this without using animation. Hope this is the effect you want.
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#banner-container {
padding: 100px 0;
background-color: orange;
}
#banner-container {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
padding: 20px 0;
}
#banner-container.dynamic {
padding: 100px 0;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#banner-container.static + #buffer {
padding-top: 268px;
}
#banner-container.dynamic + #buffer {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
padding-top: 88px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
I have an animation set on my homepage headline using CSS to make it fade in when the page loads.
I have seen on other sites a really impressive animation that will fade in the title and move it down slightly.
How would I have to alter my code to be able to achieve this?
<div class="homepage">
<div class="headline">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline">
<h1>
<span>To the home of</span>
</h1>
</div>
<div class="subheadline">
<h1>
<span>Multimedia Journalist</span>
</h1>
</div>
<div class="subheadline">
<h1>
<span>Dan Morris</span>
</h1>
</div>
Let's talk
<div class="down-link">
<a class="w-downlink" href="#about">
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
opacity: 0;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation: fadeIn 1s ease-in .5s both;
animation: fadeIn .1s ease-in .5s both;
}
Simply use the top property along with position: relative;:
https://jsfiddle.net/svArtist/sc7dduue/
.headline {
height: auto;
width: 75%;
margin-left: 78px;
margin-top: 120px;
margin-right: auto;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 12px;
font-weight: 200;
color: #676767;
text-align: left;
opacity: 0;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
top: -40px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
top: -40px;
}
100% {
opacity: 1;
top: 0px;
}
}
.fadeIn {
position:relative;
-webkit-animation: fadeIn 1s ease-in .5s both;
animation: fadeIn 1s ease-in .5s both;
}
<div class="homepage">
<div class="headline fadeIn">
<h1><span>WELCOME</span></h1>
</div>
<div class="subheadline">
<h1><span>To the home of</span></h1></div><div class="subheadline"><h1><span>Multimedia Journalist</span></h1></div>
<div class="subheadline"><h1><span>Dan Morris</span></h1></div>
Let's talk
<div class="down-link"><a class="w-downlink" href="#about"><i class="fa fa-chevron-down"></i></a></div>
</div>