Develop Reference

Image dependent on link

I want to take out the image div to outside the a href while keeping the effect it has on it when pressing the link. I tried but once it is not inside the main div anymore the animation does not work.
Note: the JS script is to set a delay to let the image animate then access the link.
https://codepen.io/jinzagon/pen/JjXWzQj
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
</a>
CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked .response {
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
JS
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 1700);
});
});

Well I am still am not sure if you are taking the div outside the a tag with JavaScript or you just manually want to hard code it like that. I'll assume the latter
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
</a>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
and for your JS
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $responsiveDiv = $('.response')
$responsiveDiv.addClass('clicked'); // Instead of adding clicked to a tag add class clicked directly to responsive div
setTimeout(function() {
window.location.assign($responsiveDiv.attr('href'));
}, 1700);
});
});
and for your CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked { /* Changed */
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}

Have you considered using a data- attribute? That may be the easiest approach to this problem:
$(document).ready(function() {
$('.response img').click(function(e) {
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('data-href'));
}, 1700);
});
});
body{
background-color:black;
}
a {
overflow: hidden;
}
.response {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" data-href="http://google.com" />
</div>
You may now move the a anywhere you like if you still need it.

Why isn't this :after element working?

I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});

Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..

Smoothly animate background color opacity after underlying image loads

I have a div with a black background. When my page loads, I make a call for an image and then load that image into a div behind the main div. Then I want to smoothly fade the overlaying div to have an opacity so that the image underneath is displayed, but without impacting the opacity of content in the overlaying div.
What I have isn't really working at all: https://jsfiddle.net/n7t2xmha/3/
The animation is not smooth
The opacity is not accurate
The text does not stay solid
Code:
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.outerdiv-opaque {
opacity: 0.9 !important;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index=-1;
}
JS
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
}, 1000)

Separate the timeouts functions.
modify the .outerdiv-opaque class
.outerdiv-opaque {
background-color: white;
}
your timeOut functions after separating would look like this
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);

I would use a pseudo, like this, which will keep your markup as is and as the opacity is on the pseudo it won't effect any other element.
Instead of a script, I used an extra step on the animation, where I told it to keep its opacity at 1 up until 60% of the animation time before it should start to fade.
.outerdiv {
position: relative;
height: 500px;
width: 500px;
color: white;
background: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv::before {
content: '';
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
animation: fade 2s linear;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
p {
position: relative;
}
#keyframes fade {
0% { opacity:1 }
60% { opacity:1 }
100% { opacity:0.5 }
}
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>

There are literally a dozen ways to do this. Here are four basic examples which work smoothly.
Using CSS Transitions
HTML:
<div class="container">
<div class="outerdiv">
</div>
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv.fadeout{
opacity:0
}
.container p{
position:relative;
z-index:3;
}
JS:
// wait 1 second, add the fadeout class, let the CSS do the rest
setTimeout(function(){
document.querySelector('.outerdiv').classList.add('fadeout')
},1000);
See it in action: https://jsfiddle.net/kmm8e0x7/8/
Using CSS Animation
HTML: same as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv{
animation: fadeout .5s linear forwards 1s;
/*
Which is shorthand for:
animation-name: fadeout
animation-duration: .5s;
animation-timing-function: linear
animation-fill-mode:forwards;
animation-delay: 1s
*/
}
.container p{
position:relative;
z-index:3;
}
#keyframes fadeout{
from{opacity:1}
to{opacity:0}
}
JS: none (animation-delay property removes the need for setTimeout)
See it in action: https://jsfiddle.net/kmm8e0x7/7/
Using JavaScript
HTML: as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.container p{
position:relative;
z-index:3;
}
JS:
var el = document.querySelector('.outerdiv');
function fadeout(){
el.style.opacity -= 0.01;
if(el.style.opacity !== 0){
requestAnimationframe(fadeout);
// this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame
}
}
// just use setTimeout to wait for 1 second before starting the fadeout
setTimeout(fadeout,1000);
See it in action: https://jsfiddle.net/kmm8e0x7/6/
Using jQuery
HTML: same as above
CSS: same as above
JS:
$('.outerdiv').animate({
'opacity': '0'
}, 500);
See it in action: https://jsfiddle.net/kmm8e0x7/5/

CSS Marquee speed

Using CSS for a marquee effect, the code is running perfect. My only issue is speed.
When the text is short the marquee takes longer. When the text is long the marquee runs very quickly. I know the above is because of the animation time animation: marquee 15s linear infinite;
Is there a way to run the marquee at a consistent speed no matter the text length?
I am open to use Javascript if needed (I have tried but not succeeded.)
Here is my current CSS code:
<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
animation-delay: 10s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px 'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
</style>
HTML
<div class="marquee">
<p class="scroll marquee"><span id="scrolltext"></span></p>
</div>

Right, this is more of a math problem than anything.
We can do a simple Time = Distance/Speed calculation like this
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelector('.marquee span');
var spanLength = spanSelector.offsetWidth;
var timeTaken = spanLength / speed;
spanSelector.style.animationDuration = timeTaken + "s";
}
calcSpeed(100);
function calcFastSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelector('.fast.marquee span');
var spanLength = spanSelector.offsetWidth;
var timeTaken = spanLength / speed;
spanSelector.style.animationDuration = timeTaken + "s";
}
calcFastSpeed(500);
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
<div class="marquee">
<span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="fast marquee">
<span>Lots of text, written in a long sentence to make it go off the screen. Well I hope it goes off the screen</span>
</div>
Of course, this is a simple example that doesn't take into account how long the 'track' is, but now you know the basics I'm sure you can work it out :-)
Here is another example with 2 different lengths of text traveling at the same speed
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelectorAll('.marquee span'),
i;
for (i = 0; i < spanSelector.length; i++) {
var spanLength = spanSelector[i].offsetWidth,
timeTaken = spanLength / speed;
spanSelector[i].style.animationDuration = timeTaken + "s";
}
}
calcSpeed(100);
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
color: white;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee linear infinite;
animation-delay: 5s;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px'Verdana';
bottom: 0px;
color: white;
left: 0px;
height: 10%;
}
<div class="marquee">
<span>Lots of text, written in a long sentance to make it go off the screen. Well I hope it goes off the screen</span>
</div>
<br />
<div class="marquee">
<span>Well I hope it goes off the screen</span>
</div>

You can give your sliding element the same width, then they should scroll with the same speed. But it´s not really dynamic.
Or you can calculate the speed depending on the width of the element. See my small demo.
// your time for 10 px in seconds
var timeFor10Px = 0.2;
var animationSettings = 'marquee linear infinite';
var $marque = $('.marque');
$marque.each( function() {
var outerWidth = $(this).outerWidth();
var calc = outerWidth / 10 * timeFor10Px;
$(this).css('animation', animationSettings + ' ' + calc + 's');
});
.holder {
background: black;
width: 100%;
color: white;
}
.marque {
/* removed, see js tab */
/*animation: marquee 15s linear infinite; */
display: inline-block;
}
#keyframes marquee {
from {
transform: translate( 0%);
}
to {
transform: translate( 100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<span class="marque marqu1">
Some nice Text
</span>
<br>
<span class="marque marqu2">
Some nice Text Lorem Ipsum dolor sit amet.....
</span>
</div>
edit: #Andrew Bones was a little bit faster, with the similar solution

hi here is the example you are trying to do Example
and more if you can provide proper HTML code Details with the question
body { margin: 20px; }
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
Hii it's look like it's working proper with
#keyframes marquee {
0% {
transform: translate(10%, 0);
}
100% {
transform: translate(-100%, 0);
}
}
-------- i used belowed one that works fine for me ----------
------------------ you can try thisss---------------------
#keyframes marquee {
0% {
transform: translate(0%, 0);
}
100% {
transform: translate(-100%, 0);
}
}

How does Mozilla create this animated effect?

On its release notes to Firefox 42, Mozilla has an animation effect that uses no Javascript, no CSS animation, no video or plug-in, and no animated gif.
Please refer to this page to observe the effect. There is a robot at the bottom right corner of the shield that blinks every few seconds. It is in a div element of class critter bottom-right
How is this effect done?
EDIT: I was mistaken; CSS animations are used; they just don't show up in the Animations tab of the DOM Inspector but they can be seen in the Rules tab when ::before ::after is selected within the div element containing the robot.

Right click on the area and "Inspect Element"
Inside <div class="shield-container></div> you can see the following css animation
See the CSS section of the debug tools to see what css does there.

It uses CSS animation. You can see the animation rule in the DOM inspector.

This uses CSS animation on the :before pseudo element.
#tracking-protection-animation .critter.bottom-right::before {
position: absolute;
top: 20px;
right: 52px;
width: 32px;
height: 32px;
background-image: url("/media/img/firefox/tracking-protection/sheild-animation/eye-lid-bottom-right.070dfe3825e1.png");
opacity: 0;
content: "";
animation: 6s linear 0s normal none infinite running blink;
}
#keyframes blink{
0%{
opacity:0
}
40%{
opacity:0
}
41%{
opacity:1
}
42%{
opacity:1
}
43%{
opacity:0
}
75%{
opacity:0
}
76%{
opacity:1
}
77%{
opacity:1
}
78%{
opacity:0
}
100%{
opacity:0
}

Here is the CSS and mark-up to reproduce the example:
http://jsfiddle.net/ren8tx55/
<div id="tracking-protection-animation">
<div class="shield-container">
<div class="critter top-left"></div>
</div>
</div>
CSS
#tracking-protection-animation .shield-container {
position: relative;
z-index: 0;
}
#tracking-protection-animation .critter.top-left::before {
animation: 7s linear 0s normal none infinite running blink;
background-image: url("https://mozorg.cdn.mozilla.net/media/img/firefox/tracking-protection/sheild-animation/eye-lid-top-right.8fb9f328fa1f.png");
content: "";
height: 48px;
left: 45px;
opacity: 0;
position: absolute;
top: 56px;
width: 48px;
}
#tracking-protection-animation .critter.top-left::after {
animation: 10s linear 0s normal none infinite running recorder;
background-color: #ff397e;
border-radius: 100%;
content: "";
height: 8px;
left: 24px;
opacity: 0;
position: absolute;
top: 76px;
width: 8px;
}
#tracking-protection-animation .critter.top-left {
background-image: url("https://mozorg.cdn.mozilla.net//media/img/firefox/tracking-protection/sheild-animation/critter-top-left.e4cd620eeb90.png");
height: 129px;
left: 0;
top: 0;
width: 122px;
}
#tracking-protection-animation .critter {
background-position: left top;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
#keyframes recorder {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
21% {
opacity: 1;
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
41% {
opacity: 1;
}
42% {
opacity: 1;
}
43% {
opacity: 0;
}
75% {
opacity: 0;
}
76% {
opacity: 1;
}
77% {
opacity: 1;
}
78% {
opacity: 0;
}
100% {
opacity: 0;
}
}