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..
Related
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
}
}
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;
}
}
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>
I am trying to simulate a transfer of images by showing an image disappearing from the originating device and after a delay appearing on the target device. The application is for an experiment to design gestures
I have done the following that shows how an image appears and disappears when hovered upon
#pic3 {
max-width: 800px;
max-height: 500px;
width:500px; height:800px;
position:absolute;
}
#pic3 {
max-width: 800px;
max-height: 500px;
width:500px; height:800px;
position:absolute;
}
#pic4 {
width:500px; height:800px;
position:absolute;
max-width:800px;
max-height: 500px;
opacity:0;
-webkit-transition: opacity 1s;
}
#pic3:hover ~ #pic4, #pic4:hover {
opacity:1;
}
<div class="maps1">
<img id="pic3" src="http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg" />
<img id="pic4" src="http://www.garageservicesruislip.co.uk/communities/5/004/008/507/645/images/4586026183.jpg />
</div>
you have a typo in your html in the last img (missing ")
btw. i would try to solve it using jQuery
If you are trying to make an animation on one device - ie a desktop computer - trigger an animation on another device - ie a smartphone - you're going to need some means of communicating between the two. There will need to be some kind of session ID or other marker to facilitate communication between two separate browsers accessing content on a webpage each of them has loaded and rendered separately.
You'll be able to achieve this kind of functionality in a number of ways, but I suggest reading up on websockets using node.js.
If you're simply trying to mock it up on one screen (read: one browser, one session) then you're best off doing something like what #jbutler483 describes.
A simple Keyframe solution:
.device {
position: absolute;
height: 200px;
width: 150px;
background: gray;
border: 10px solid black;
border-radius: 5px;
top: 0;
left: 400px
}
.device:first-child {
right: auto;
left: 0;
}
img {
height: 100px;
width: 100px;
z-index: 8;
position: absolute;
top: 20px;
left: 30px;
-webkit-animation: animated 5s infinite;
animation: animated 5s infinite;
-webkit-animation-direction: linear;
/* Chrome, Safari, Opera */
animation-direction: linear;
}
#-webkit-keyframes animated {
10% {
opacity: 1;
}
30% {
opacity: 0;
left: 30px;
}
60% {
opacity: 0;
left: 430px;
}
90% {
left: 430px;
opacity: 1;
}
100% {
left: 430px;
opacity: 1;
}
}
#keyframes animated {
10% {
opacity: 1;
}
30% {
opacity: 0;
left: 30px;
}
60% {
opacity: 0;
left: 430px;
}
90% {
left: 430px;
opacity: 1;
}
100% {
left: 430px;
opacity: 1;
}
}
<div class="device"></div>
<img src="http://placekitten.com/g/300/300" />
<div class="device"></div>
My Approach
You could use Keyframes for this, and use a little magic to create a nice effect. Here I've used rotation, opacity, and movement to generate this 'movement' from one device to another.
.start,
.end {
position: absolute;
height: 250px;
background: gray;
border: 10px solid black;
border-radius: 5px;
width: 100px;
top: 0;
left: 0;
}
.end {
left: auto;
right: 0;
}
.imgMove {
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
height: 50px;
width: 50px;
position: absolute;
top: 100px;
left: 40px;
z-index: 8;
-webkit-animation: myfirst 3s infinite;
animation: myfirst 3s infinite;
}
#two {
background: url(http://placekitten.com/g/200/300);
-webkit-animation-delay: 0.5s;
animation-delay: 0.4s;
}
#three {
background: url(http://placekitten.com/g/300/200);
-webkit-animation-delay: 0.1s;
animation-delay: 0.6s;
}
#-webkit-keyframes myfirst {
0% {
top: 100px;
height: 50px;
width: 50px;
opacity: 0;
}
50% {
top: 10px;
height: 200px;
width: 200px;
left: calc(50% - 100px);
-webkit-transform: rotate(360deg);
opacity: 1;
}
100% {
top: 100px;
height: 50px;
width: 50px;
left: 90%;
-webkit-transform: rotate(720deg);
opacity: 0;
}
}
#keyframes myfirst {
0% {
top: 100px;
height: 50px;
width: 50px;
opacity: 0;
}
50% {
top: 10px;
height: 200px;
width: 200px;
left: calc(50% - 100px);
transform: rotate(360deg);
opacity: 1;
}
100% {
top: 100px;
height: 50px;
width: 50px;
left: 90%;
transform: rotate(720deg);
opacity: 0;
}
}
<div class="wrap">
<div class="imgMove" id="one"></div>
<div class="imgMove" id="two"></div>
<div class="imgMove" id="three"></div>
<div class="start">START</div>
<div class="end">END</div>
</div>
See the demo here:
http://jsfiddle.net/hamidrezabstn/fgcPa/5/
When I click on the middle raindrop , I would like it to rotate to the current position of the spinning circle! I tried below the JS code but it doesn't work! The next thing I want to do is the raindrop rotate with spining circle!
$(function() {
$('#center').click(function() {
var pos = $('#circle').css('transform')
$(this).css('transform', 'pos')
});
});
$(function() {
$('#center').click(function() {
var obj, matrix;
obj = document.getElementById('circle');
matrix = getComputedStyle(obj).getPropertyValue('transform');
console.log(matrix);
//$(this).css('transform', matrix)
});
});
read more here http://dev.opera.com/articles/view/understanding-3d-transforms/
EDITED: I said that it is not posible to get the current status of the transform in an animation, but I was wrong. Sorry about that !
To do what you want, any way, you don't need really to get it; just use it.
I have changed slightly your HTML to put the raindrop inside the rotating div.
Then, with this CSS:
.raindrop {
background:center blue;
width:50px;
height:50px;
border-radius: 100%;
border-top-left-radius: 0;
position: absolute;
margin: auto;
left: 75px;
top: 75px;
animation: ccircle 5s infinite linear;
-webkit-animation: ccircle 5s infinite linear;
}
.raindrop:hover {
animation: none;
-webkit-animation: none;
}
.axis {
width: 200px;
height: 200px;
transform: scaleX(2);
background-color: none;
border: 1px solid black;
left: 50px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
top: 0px;
animation: circle 5s infinite linear;
-webkit-animation: circle 5s infinite linear;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
position: absolute;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
-webkit-animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from { transform: rotateZ(0deg) }
to { transform: rotateZ(360deg) }
}
#-webkit-keyframes circle {
0% { -webkit-transform: rotateZ(0deg) }
100% { -webkit-transform: rotateZ(360deg) }
}
#keyframes ccircle {
from { transform: rotateZ(360deg) }
to { transform: rotateZ(0deg) }
}
#-webkit-keyframes ccircle {
from { -webkit-transform: rotateZ(360deg) }
to { -webkit-transform: rotateZ(0deg) }
}
You got this fiddle
In it, the raindrop is always rotating with the axis div. But it is also counter-rotating, so it appears to be static.
When you hover it, the count-rotation is disabled, and it points to red circle. And will continue to do so as long as you hover it.
To do that thru a click, just asociate the :hover properties to a class, and set this class in the click.