Apply Opacity to Sibling Paragraphs One at a Time During Scroll Animation - javascript

I have a figure that wraps a few paragraphs as siblings; the code for which is down below. Also, feel free to run the snippet and hover over the area.
I also have the following style rules to scroll the paragraphs up upon figure:hover...
figure p {
opacity:0;
}
figure:hover p {
opacity:1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
margin: 0;
line-height: 50px;
text-align: center;
-webkit-transform:translateY(100%);
transform:translateY(100%);
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
50% {
opacity:1;
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity:0;
}
}
<figure class="fig_a">
<img src="my_url"/>
<figcaption>
<h2>Hover Somewhere Around Here</span></h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
View more
</figcaption>
</figure>
Note that the opacity style results in all the paragraphs becoming 100% transparent at the same time. As the post title suggests, I'm looking for a different style; one that allows for a more nuanced transition. Specifically:
Question: How can I have each paragraph follow its own opacity transition in tandem with its relative position in the scroll transition? In other words, paragraphs that are higher up on the page are more transparent. Likewise, paragraphs who are lower on the page are more opaque.
CSS, JS solutions are all welcome. However I am not working in a jquery environment, so I must use native JS (if JS is needed at all).

Related

How to animate 2 images when showing one hide other one in css animation?

image link which ı want to create
web page link which i look for
I want to create an animation area in my web page . I have a reference web page above and i want to make same animation area . when one images slide down other one is hidden and wait its turn . i used css keyframes for this but i could not get exactly what i want .
<div class="col-log">
<img src="/img/tuvnord.png" class="resms1" alt="dd">
<img src="/img/ce.png" class="resms2" alt="">
</div>
i have col-log divs like this which fills my card area like showed above image link.
.gelisme2 .resms1 {
position: absolute;
animation-name: pic1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
.gelisme2 .resms2 {
position: absolute;
animation-name: pic2;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes pic1 {
0% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, -50);
}
100% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 50);
}
}
#keyframes pic2 {
0% {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 50)
}
100% {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0)
}
}
You are correct that you can do the whole thing with css / keyframes. I've got the basics roughed out for you, but you'll need to tweak the timings. Everything you need to do that is on this page:
https://www.w3schools.com/css/css3_animations.asp
In the below snippet, the outer container (.flex-row) is set to display:flex to show the immediate child containers (.flex-cell) side by side. The flex-cell containers are then set to display:block so that their contents are not side-by-side. Within each flex-cell, the logo divs are in pairs, stacked one above the other (which makes it easier to do the slideUp / slideDown animations).
The snippet uses one #keyframes definition for all "top" logo divs, and one #keyframes definition for all bottom logo divs. You might find it easier to give each logo div (dimg) its own keyframe definition. Whatever is easiest. Get it working first, then streamline it second - it's too easy to get confuzzled when trying to do both at the same time. Start out with just one logo pair, get that couple working the way you want, then add another flex-cell.
Again, the timing isn't quite right with the below example but I'm sure you can manage to tweak it to perfection. (Note that the first one (timing) is different from the other two. I started playing with the timing, to make the top/bottom changes overlap a bit, but decided that you'll be fine from this point forward. That's why the first pair looks quite different.)
.flex-row{display:flex;}
.flex-cell{display:block;padding:5px 20px;max-height:45px;border:1px solid #ddd;}
img{width:70px;height:40px;}
.twoA, .twoB, .twoC{opacity: 0;}
.oneA, .oneB, .oneC{opacity: 1;}
.oneA{
transition: transform .3s;
animation: doOne 6s linear 0s infinite forwards;
}
.oneB{
transition: transform .3s;
animation: doOne 6s linear .5s infinite forwards;
}
.oneC{
transition: transform .3s;
animation: doOne 6s linear 1s infinite forwards;
}
.twoA{
transition: transform .3s;
animation: doTwo 6s linear 2s infinite forwards;
}
.twoB{
transition: transform .3s;
animation: doTwo 6s linear 3.5s infinite forwards;
}
.twoC{
transition: transform .3s;
animation: doTwo 6s linear 4s infinite forwards;
}
#keyframes doOne {
0% {opacity:0; transform: translate(0, -15px);}
15%{opacity:0;transform: translate(0, -15px);}
18%{opacity:1;transform: translate(0, 0px);}
40%{opacity:1;transform: translate(0, 0px);}
45%{opacity:1;transform: translate(0, 0px);}
50%{opacity:0;transform: translate(0, 25px);}
100%{opacity:0;transform: translate(0, 25px);}
}
#keyframes doTwo {
0% {opacity:0; transform: translate(0, 0px);}
15%{opacity:0;transform: translate(0, 0px);}
18%{opacity:1;transform: translate(0, -40px);}
40%{opacity:1;transform: translate(0, -40px);}
45%{opacity:1;transform: translate(0, -40px);}
50%{opacity:0;transform: translate(0, 0px);}
100%{opacity:0;transform: translate(0, 0px);}
}
<div class="flex-row">
<div class="flex-cell">
<div class="dimg oneA"><img src="https://business.exetel.com.au/images/partners/Optus.svg" /></div>
<div class="dimg twoA"><img src="https://business.exetel.com.au/images/partners/AAPT.svg" /></div>
</div><!-- .flex-cell -->
<div class="flex-cell">
<div class="dimg oneB"><img src="https://business.exetel.com.au/images/partners/Megaport.svg" /></div>
<div class="dimg twoB"><img src="https://business.exetel.com.au/images/partners/Cisco.svg" /></div>
</div><!-- .flex-cell -->
<div class="flex-cell">
<div class="dimg oneC"><img src="https://business.exetel.com.au/images/partners/Cirrus.svg" /></div>
<div class="dimg twoC"><img src="https://business.exetel.com.au/images/partners/Opticomm.svg" /></div>
</div><!-- .flex-cell -->
</div>
you could add an "animation-delay" to the correct class you want to keep it waiting if the other animation is done

When working with css animations, is there is any way to make successive animations repeat infinitely in the given order

When I was working with CSS animations, I had to make two animations successive, but as soon as I did that, I just remembered that the animations must repeat infinitely. Is there is any way to make them repeat infinitely in the same order without making the animations one by merging keyframes, using only CSS?
If there isn't, how could I do it with JavaScript?
I tried re-invoking the animation in the last keyframe of the last animation but that didn't work because you can't animate animation.
.div{
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
#keyframes spin {
from {
transform: rotateX(0deg);
}
99% {
transform: rotateX(360deg);
}
100% {
transform: rotateX(360deg);
animation: spin 1.6s ease-in-out 0s 1 normal running,
rotate 1s ease-in-out 1.5s 1 normal running;
}
}
#keyframes rotate {
from {
transform: rotatez(0deg) rotatey(0deg);
}
to {
transform: rotatez(-33deg) rotatey(-37deg);
;
}
}
Simply create a new animation based on your requirements:
.box{
background:red;
width:100px;
height:100px;
animation: spin 2.6s ease-in-out infinite;
}
#keyframes spin {
0%{
transform: rotateX(0deg);
}
61.54% { /*1.6s */
transform: rotateX(360deg) rotatez(0) rotatey(0) translateZ(0);
}
100% {
transform: rotateX(360deg) rotatez(-33deg) rotatey(-37deg) translateZ(1000px);
}
}
<div class="box">
</div>

Perfectly smooth looped eased css animation

I'm trying to animate an element to slowly move from left to right a small distance and do it in a smooth way but the result is not very good.
Here is what I have so far:
.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
#keyframes sideways {
50% {
transform: translateX(30px);
}
100% {
transform: translateX(-30px);
}
}
I think the problem is related to the missing start point in the keyframes for the transform attribute.
A minor tweak to your code should correct the issue.
A different animation-timing-function value or time frame (less that 5s for example) may suit you better as well.
.contain { width:100% }
.animate_sideways {
width:40px;
height:40px;
background:#482;
animation:sideways 5s linear infinite;
animation-timing-function:ease-in, ease-in-out;
}
#keyframes sideways {
0% { transform: translateX(-30px) }
50% { transform: translateX(30px) }
100% { transform: translateX(-30px) }
}
<div class="contain">
<div class="animate_sideways"></div>
</div>

waitForImages Plugin - not waiting

My jquery/js code is not waiting for images loaded to fade out. What is the problem?
$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
/*******************
Loading
*********************/
#load {
position:absolute;
height:100vh;
width:100vw;
background-color:#ddd;
z-index:1000;
/*-moz-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
transition:all 2s ease-out;*/
}
#-o-keyframes spin {
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
100%{
transform: rotate(360deg);
}
}
.spinner {
position:absolute;
top:45vh;
left:45vw;
width:5vh;
height:5vh;
border: 6px solid #F90;
border-left-color:#FC3;
border-bottom-color:#FF6;
border-right-color:transparent;
border-radius:100%;
animation: spin 400ms infinite linear;
margin: auto;
}
<div id="load">
<div class="spinner"></div>
</div>
So I want while my background image is loading to hold the spinner, but it fade outs without image.
Page - http://sarosacramento.com/
Plugin - https://github.com/alexanderdickson/waitForImages
From their github page, it looks like you're supposed to apply .waitForImages() to an element selector (which either has image children or images in its CSS). In your code, instead of applying it to the selector, you're first adding CSS, then trying to apply .waitForImage(), which won't work, since the .css() doesn't return a selector. Try instead:
$('#entry').waitForImages(function () {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
for the JS and just put the background image in normal CSS:
#entry {
background-image: url(../img/backg3.jpg);
}
(If you must set it via JS, do that before applying .waitForImages() to $("entry"):
$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...
though I haven't actually tested this.)
Here's an example: http://jsfiddle.net/aq9t6kvk/2/. (It mostly uses your code, but I used some different images that wouldn't be in our caches already. But since the first one might already be loading while JSFiddle is "initializing the awesome", there are some backups for subsequent "Run"s.)

Add custom animation delay for every div with the class "bounce"?

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.
example:
<div class="360player bounce">
<a href="audio/The_Song.mp3">
The Song
</a>
</div>
Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.
I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times.
Example below
#keyframes fallingstars {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-870px, 500px) rotateZ(310deg);
}
}
#keyframes fallingstars2 {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(25deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-570px, 600px) rotateZ(210deg);
}
}
#fallstar {
animation: fallingstars 12s infinite;
animation-delay:5s;
z-index:-1;
}
#fallstar2 {
animation: fallingstars2 12s infinite;
z-index:-1;
}
<img src="stars-ALL.svg" id="fallstar" alt="Stars" style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />
You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.
I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.
CSS:
.wait300ms {
animation-delay: 300ms;
/*TODO: Add cross-browser attributes */
}
HTML:
<div class="360player bounce wait300ms">

Categories

Resources