Ok, maybe stackoverflow can help? :)
I'm trying, without any luck, to create a page transition effect with an svg image.
When the user clicks on a link in Page 1, a diamond shaped svg fades in like a portal into Page 2.
The basic idea is to recreate the space travel in the intro of the Alphaville - Forever Young video: https://www.youtube.com/watch?v=t1TcDHrkQYg
:)
Maybe the diamond also fades in from blue to transparent (but that is the next step).
Diamond svg: https://www.onlinewebfonts.com/icon/413
I suggest you use clip-path instead of a svg since animating an svg that big will be really slow and really laggy. You can change the clip path to show what you want. Bennet Feely created a nice generator that helps with this.
For the animation itself you can increase the width and height to fit your screen. Then fill the remainder by animating the Z axes.
Animation looks better in fullscreen then in the smaller preview
const links = document.querySelectorAll(".page-transition");
const overlay = document.querySelector(".overlay__diamond");
for(const link of links) {
link.addEventListener("click", (event) => {
event.preventDefault();
overlay.classList.add("overlay__diamond--animate");
setTimeout(() => window.location.reload(), 1000);
// This one is correct, one above is for the demo
// setTimeout(() => (window.location.href = link.href), 1000); // Same time as animation duration
});
}
.page {
background: green;
/* For demontrational purposes only, just to increase page size */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
pointer-events: none;
perspective: 500px; /* Needed for translateZ to work */
}
.overlay__diamond {
width: 100%;
height: 100%;
background: blue;
animation: fadeout 1s linear forwards;
}
.overlay__diamond--animate {
animation: zoom 1s linear forwards;
clip-path: polygon(50% 0%, 75% 50%, 50% 100%, 25% 50%);
}
#keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoom {
0% {
width: 0;
height: 0;
transform: translateZ(0);
}
100% {
width: 100%;
height: 100%;
transform: translateZ(400px); /* Can't go higher then the perspective */
}
}
<div class="page">
<!-- Replace #link with your actual urls -->
<a class="page-transition" href="#link">Link</a>
<a class="page-transition" href="#link">Link</a>
<a class="page-transition" href="#link">Link</a>
<div class="overlay">
<div class="overlay__diamond"></div>
</div>
</div>
Maybe there is some javascript required please suggest.You can check at aditagarwal.com
CSS.
.images-wrapper{
position: fixed;
left: 0;
top: 80px;
bottom: 0;
width: 100%;
height: 100vh;
animation: animate 16s ease-in-out infinite;// maybe something here
background-size: cover;
}
#keyframes animate{
0%,100%{
background-image: url(coding2.jpeg);
}
25%{
background-image: url(Flowers.png);
}
50%{
background-image: url(Desert.png);
}
75%{
background-image: url(sunset.png);
}
}
HTML
<div class="images-wrapper">
</div>
As you didn't ask for a CSS only solution, I used some JS code here, which continuously changes the BG. Also check I added transition:background 1s ease-in which makes the transition smoother particularly.
const elem = document.getElementById("main");
const bg = [
"https://wallpapercave.com/wp/wp2599605.jpg",
"https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"
];
elem.style.backgroundImage = `url(${bg[0]})`;
let i = 0;
setInterval(() => {
i = i == 1 ? 0 : 1;
elem.style.backgroundImage = `url(${bg[i]})`;
}, 2000);
div {
position: fixed;
left: 0;
top: 80px;
bottom: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-repeat:no-repeat;/*Modified for demo*/
transition: background 1s ease-in;
}
<div id="main">
</div>
I'm trying to create a rotating CD/Disk effect when the play button is clicked. I managed to come up with an example, see the code below. This is partially the state of the player when it is in play mode.
What I would like to create is have a square image with a play button on top. When the user clicks the button, the pause button appears and the middle part of the image starts rotating like a spinning CD/Disk.
I have tried a few things but my skills in JavaScript are lacking to create such an effect.
Any help is appreciated.
NOTE: The code answer should be able to work on the Jimdo site builder.
$(function() {
var activePlayerStartBtn;
function stopOtherPlayerSetNewAsActive(element) {
var toShow = $(element).parent().find('.btn.hide')[0];
$(element).addClass('hide');
$(toShow).removeClass('hide');
if (activePlayerStartBtn) {
var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
$(stopButton).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
}
activePlayerStartBtn = element;
}
function stopPlayer(element) {
$(element).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
activePlayerStartBtn = null;
}
var widget1 = SC.Widget("so");
$("#playSound").click(function() {
widget1.play();
stopOtherPlayerSetNewAsActive("#playSound");
});
$("#stopSound").click(function() {
widget1.pause();
stopPlayer('#stopSound');
});
});
.button-wrapper {
position: relative;
width: 100%;
max-width: 300px;
}
.img-circle {
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
animation: loading 10s linear infinite;
width: 100%;
max-width: 300px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.btn {
position: absolute;
width: 100%;
max-width: 70px;
cursor: pointer;
transform: translate(-50%, -53%);
top: 50%;
left: 50%;
opacity: .7;
clip-path: circle(33% at 50% 50%);
-webkit-clip-path: circle(33% at 50% 50%);
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>
<div class="button-wrapper">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
<img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
<img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>
<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>
I think this might be what you are looking for.
jsFiddle with rotating Disk example
Let me explain what is happening so you understand what the code and styles do.
I've added the album image twice, one is the background, one is used to create the rotating disk. It looks like this.
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle -clipped">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
You don't see the clipped image, it only is noticed when the animation starts.
When a player is clicked, the -rotating class is added to start the animation.
// Find the clippedImg and add the class -rotating to start the animation
var clippedImg = $(element).parent().find('.-clipped')[0];
$(clippedImg).addClass('-rotating');
When the pause button is clicked, the -rotating class is removed.
Let me know if that's what you are looking for.
I believe you should be able to utilize the css property animation-play-state: paused;
$(function() {
var activePlayerStartBtn;
function stopOtherPlayerSetNewAsActive(element) {
var toShow = $(element).parent().find('.btn.hide')[0];
$(element).addClass('hide');
$(toShow).removeClass('hide');
$('.img-circle').removeClass('paused');
if (activePlayerStartBtn) {
var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
$(stopButton).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
}
activePlayerStartBtn = element;
}
function stopPlayer(element) {
$(element).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
$('.img-circle').addClass('paused');
activePlayerStartBtn = null;
}
var widget1 = SC.Widget("so");
$("#playSound").click(function() {
widget1.play();
stopOtherPlayerSetNewAsActive("#playSound");
});
$("#stopSound").click(function() {
widget1.pause();
stopPlayer('#stopSound');
});
});
.button-wrapper {
position: relative;
width: 100%;
max-width: 300px;
}
.img-circle {
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
animation: loading 10s linear infinite;
width: 100%;
max-width: 300px;
}
.paused {
animation-play-state: paused;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.btn {
position: absolute;
width: 100%;
max-width: 70px;
cursor: pointer;
transform: translate(-50%, -53%);
top: 50%;
left: 50%;
opacity: .7;
clip-path: circle(33% at 50% 50%);
-webkit-clip-path: circle(33% at 50% 50%);
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>
<div class="button-wrapper">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle paused">
<img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
<img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>
<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>
I don't know how to use JQuery, so I need a method which could trigger an animation using JavaScript only.
I need to call/trigger CSS Animation when the user scrolls the page.
function start() {
document.getElementById('logo').style.animation = "anim 2s 2s forward";
document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}
* {
margin: 0px;
}
#logo {
position: fixed;
top: 200px;
height: 200px;
width: 1000px;
left: 5%;
z-index: 4;
opacity: 0.8;
}
#earthlogo {
position: fixed;
top: 200px;
height: 120px;
align-self: center;
left: 5%;
margin-left: 870px;
margin-top: 60px;
z-index: 4;
opacity: 0.9;
}
#keyframes anim {
50% {
filter: blur(10px);
transform: rotate(-15deg);
box-shadow: 0px 0px 10px 3px;
}
100% {
height: 100px;
width: 500px;
left: 10px;
top: 10px;
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 1, 0.3);
opacity: 0.7;
}
}
#keyframes anim2 {
50% {
filter: blur(40px);
transform: rotate(-15deg);
}
100% {
height: 60px;
width: 60px;
left: 10px;
top: 10px;
margin-left: 435px;
margin-top: 30px;
opacity: 0.8;
}
}
#backstar {
position: fixed;
width: 100%;
z-index: 1;
}
#earth {
position: absolute;
width: 100%;
z-index: 2;
top: 300px;
}
<img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">
The simplest method to trigger CSS animations is by adding or removing a class - how to do this with pure Javascript you can read here:
How do I add a class to a given element?
If you DO use jQuery (which should really be easy to learn in basic usage) you do it simply with addClass / removeClass.
All you have to do then is set a transition to a given element like this:
.el {
width:10px;
transition: all 2s;
}
And then change its state if the element has a class:
.el.addedclass {
width:20px;
}
Note: This example was with transition. But for animations its the same: Just add the animation on the element which has a class on it.
There is a similar question here: Trigger a CSS keyframe animation via scroll
This is how you can use vanilla JavaScript to change/trigger an animation associated with an HTML element.
First, you define your animations in CSS.
#keyframes spin1 { 100% { transform:rotate(360deg); } }
#keyframes spin2 { 100% { transform:rotate(-360deg); } }
#keyframes idle { 100% {} }
Then you use javascript to switch between animations.
document.getElementById('yourElement').style.animation="spin2 4s linear infinite";
Note: 'yourElement' is the target HTML element that you wish to
animate.
For example: <div id="yourElement"> ... </div>
Adding and removing the animation class does not work in a function. The delay is simply too little. As suggested by this article you can request the browser to reflow and then add the class. The delay isn't an issue in that case. Hence, you can use this code:
element.classList.remove("animation")
element.offsetWidth
element.classList.add("animation")
The best thing is, this works everywhere. All credit goes to the article.
A more idiomatic solution is to use the Web Animations API.
Here is the example from MDN:
document.getElementById("alice").animate(
[
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
{ color: '#431236', offset: 0.3 },
{ transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);
OP's example:
document.getElementById('logo').animate(
[
{},
{
filter: 'blur(10px)',
transform: 'rotate(-15deg)',
box-shadow: '0px 0px 10px 3px',
},
{
height: '100px',
width: '500px',
left: '10px',
top: '10px',
box-shadow: '0px 0px 15px 5px rgba(0, 0, 0, 0.7)',
background-color: 'rgba(0, 0, 1, 0.3)',
opacity: '0.7',
},
],
{
duration: 2000,
delay: 2000,
fill: 'forwards',
},
)
At the time of writing, it's supported in all major browsers except IE.
Supported browsers
I have a similar problem.
The best answer didn’t work for me, but when I added the delay it worked.
The following is my solution.
CSS
.circle_ani1,
.circle_ani2 {
animation-duration: 1s;
animation-iteration-count: 1;
}
.circle_ani1 {
animation-name: circle1;
}
.circle_ani2 {
animation-name: circle2;
}
JS
let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() {
temp_circle1.addClass('circle_ani1');
temp_circle2.addClass('circle_ani2');
}, 50);
Vanilla JS version
document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");
You could use CSS to hide the image / animation and show when the user scrolls. This would work like this:
CSS:
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
#demo{
display: none;
}
HTML:
<div id="myDIV"> </div>
<div id="demo">
<img src="earthlogo.gif" id="earthlogo" alt="Thanks for scrolling. Now you see me">
</div>
Your javascript just needs to include an eventListener to call the function which triggers the display of your animation.
JS:
document.getElementById("myDIV").addEventListener("scroll", start);
function start() {
document.getElementById('demo').style.display='block';
}
You could use animation-play-state (Mdn docs) like this
element.style.animationPlayState = "paused/running"
Code snippet:
function play() {
document.getElementById("div").style.animationPlayState = "running";
}
function pause() {
document.getElementById("div").style.animationPlayState = "paused";
}
.animation {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 2s;
animation-play-state: paused;
animation-iteration-count: infinite;
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 50px;
top: 0px;
}
50% {
background-color: blue;
left: 50px;
top: 50px;
}
75% {
background-color: green;
left: 0px;
top: 50px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button><br><br>
<div id="div" class="animation"></div>
Here's the main code:
HTML:
<img id="myImg">
CSS:
#myImg {
//properties
animation: animate 2s linear infinite //infinite is important!
}
#keyframes animate {
//animation base
}
JS:
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "running";
setTimeout(function() {
document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
}, 2000);
});
If you want Animations i recommend you create a CSS class which you toggle on a Condition whit JS:
CSS
.animation {
animation: anim 2s ease infinite;
transition: .2s
}
JS
// Select your Element
$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => {
$element.classList.toggle("animation")
})
I have never asked anything on this forum before so I'll try to be as clear as possible.
I am trying to show a loading screen while the contents of a div is loading in my website.
I tried to use jQuery .load() function but it seems not to work.
It works when i use the .ready() function but i want to load all the images before to show the div.
So the div is hidden (style="display:none;")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>
<script>
$("#divtoshow").load(function(){
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>
You want to do stuff specifically when all the images on the page have loaded.Try this custom jQuery event...
/**
* Exposes an event called "imagesLoaded" which is triggered
* when all images on the page have fully loaded.
*/
(function($) {
var loadImages = new Promise(function(done) {
var loading = $("img").length;
$("img").each(function() {
$("<img/>")
.on('load', function() {
loading--;
if (!loading) done();
})
.on('error', function() {
loading--;
if (!loading) done();
})
.attr("src", $(this).attr("src"))
});
});
loadImages.then(function() {
$(document).trigger({
type: "imagesLoaded"
});
});
})(jQuery);
It works by copying each image (in the event they are already loaded, this is necessary to catch the load event) and listening for the load on the copy. I got the idea from here.
Here is a fiddle.
If you want to use the .load() method you need to bind it to the img element not to the container:
$("#divtoshow img").on('load', function(){
$("#loading").fadeOut(200, function(){
$("#divtoshow").fadeIn(200)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>
If you want the page contents to load before transitioning to display the main page div then you want to us the fundamental document.ready pattern:
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text
<img src='...a path to a large file....'/>
</div>
and then
<script>
$(document).ready(function() {
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
</script>
In general, if you are doing any element (DOM) manipulation using JQuery and you do NOT havethe document.ready() pattern in place then you should ask yourself if you should maybe add it in. Particularly if you develop with local assets because when you shift to production and network latency has an impact you may find timing issues cause odd bugs in code that worked perfectly when all assets were local.
CSS
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
HTML
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
JAVASCRIPT
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that div
$(window).on('load', function() {
$("#loading").fadeOut();
$("#divtoshow").fadeIn(300);
});
#divtoshow {
display: none;
text-align: center;
}
#loading{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
.img-responsive{
width:100%;
height:auto;
display:block;
margin:0 auto;
}
<div id="loading"></div>
<div id="divtoshow" class="animate-bottom">
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/>
<h2> loaded Title!</h2>
<p>Some text and Image in my newly loaded page..</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>