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.

Looping parallax effect on full-width element keeps jumping in CSS / JS

My preferred end goal is to have a performance friendly background that smoothly loops without jumping. All the resources that I have found online either are not very performance friendly or they only work with elements that have a set width.
Currently everything looks okay, but the background scales poorly on different screens, and will make large jumps occasionally. I assume the jumping is due to an error in the translation of the elements, but I haven't yet seen a good solution. Setting the width of the elements to 200% and translating them over -50% seems like a hacky solution, and I feel as if there should be a much better way of doing it.
I would prefer to find an all CSS solution, but if nothing else is feasible, resorting to JS is fine.
Fiddle: https://jsfiddle.net/r4fz0Lot/3/
Code:
* { box-sizing: border-box; }
html, body, #container { width: 100%; height: 100%; }
body { margin: 0; }
#container {
background-color: rgba(0, 0, 0, 0.9);
image-rendering: pixelated;
overflow: hidden;
position: fixed;
}
#stars {
background: url('https://i.imgur.com/Ym03Zkf.png') repeat 0 0;
animation: loop 25s linear infinite;
z-index: 1;
}
#mountains {
background: url('https://i.imgur.com/jfef1r3.png') repeat-x 0 bottom;
animation: loop 20s linear infinite;
z-index: 2;
}
#ground {
background: url('https://i.imgur.com/P13CzUo.png') repeat-x 0 bottom;
animation: loop 15s linear infinite;
z-index: 3;
}
#stars, #mountains, #ground {
width: 200%; height: 100%;
background-size: 30%;
bottom: 0; left: 0;
position: fixed;
}
#keyframes loop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
<div id="container">
<div id="ground"></div>
<div id="mountains"></div>
<div id="stars"></div>
</div>

You set background-size to 30% so you need to translate some multiple of 30% to translate "one image unit"
* { box-sizing: border-box; }
html, body, #container { width: 100%; height: 100%; }
body { margin: 0; }
#container {
background-color: rgba(0, 0, 0, 0.9);
image-rendering: pixelated;
overflow: hidden;
position: fixed;
}
#stars {
background: url('https://i.imgur.com/Ym03Zkf.png') repeat 0 0;
animation: loop 8s linear infinite;
z-index: 1;
}
#mountains {
background: url('https://i.imgur.com/jfef1r3.png') repeat-x 0 bottom;
animation: loop 6s linear infinite;
z-index: 2;
}
#ground {
background: url('https://i.imgur.com/P13CzUo.png') repeat-x 0 bottom;
animation: loop 5s linear infinite;
z-index: 3;
}
#stars, #mountains, #ground {
width: 200%; height: 100%;
background-size: 30%;
bottom: 0; left: 0;
position: fixed;
}
#keyframes loop {
from { transform: translateX(0); }
to { transform: translateX(-30%); }
}
<div id="container">
<div id="ground"></div>
<div id="mountains"></div>
<div id="stars"></div>
</div>

Trying to make a CSS3 diagonal slide animation, but it's not working as expected

So I'm trying to create a diagonal scroll in CSS3, but I'm having no luck.
The original script is this: https://codepen.io/275845/pen/LoYBjg
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
</style>
<div class="tech-slideshow">
<div class="mover-1"></div>
<div class="mover-2"></div>
</div>
Here's what I've tried so far, with no success: https://codepen.io/275845/pen/gJOjXY
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
</style>
And here's the result that I'm trying to achieve: https://streamable.com/ltsba
As you can see, I'm trying to make a diagonal slide scrolling in css3, but of course, if anyone could point me out another solution weather it's vanilla javascript, or even jQuery, I'm opened for new suggestions.

You're pretty close, just a few issues.
You don't need 2 "mover", one is enough.
Make it big! And background repeat!
Then you move the size of that background image.
.tech-slideshow > div {
height: 3000px; // BIG
width: 3000px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
bottom: 0;. // position
right: 0;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px);
}
100% {
transform: translatex(255px) translatey(255px); // move size of image
}
}

Overriding position of CSS Keyframes not working

I want to override a previous CSS #keyframe animation.
First, the word comes in from the right and stays in the middle.
As soon as you click on the button, the same word should be animated to move from it's current position to the top.
However, the word doesn't move at all or simply makes a quick jump to that position.
Here's a fiddle: https://jsfiddle.net/vpfd672g/10/
<button type="button" class="test-button">Click Me!</button>
<div id="window">
<div class="container">
<div class="word">Hello</div>
</div>
</div>
#window {
overflow: hidden;
}
.container {
text-align: center;
position: absolute;
width: 221px;
height: 50px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: helvetica;
font-size: 20px;
z-index: 10;
}
.word {
position: relative;
animation: slide-in-right 2s ease-out forwards;
animation-delay: 0s;
opacity: 0;
}
#keyframes slide-in-right {
0% {
right: -100px;
}
100% {
right: 0px;
opacity: 1;
}
}
#keyframes slide-out-top {
100% {
top: -100px;
opacity: 0;
}
}
<script>
let word = document.querySelector(".word");
let tstB = document.querySelector(".test-button");
tstB.addEventListener('click', doStuff);
function doStuff() {
word.style.opacity = 1;
word.style.animation = "slide-out-top 2s forwards ease-out"
}
</script>
What is it that's causing the issue or what am I missing out?

You need to add below style to slide-out-top.
0% {
top: 0px;
}
Here is the updated fiddle.

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..