I'm trying to get a full page (with nav at the top, but I don't mind the background going underneath it) zoom-out effect. However, I want it to execute once all assets are loaded, as it is the first thing seen when the page is loaded. So I wouldn't want it being executed early otherwise it may not even be seen or just the end of it would be caught.
I have seen several examples but I've had problems with them:
Animating (with jQuery) the background-size property - this made the animation 'choppy' and I read somewhere it was probably because it was being run on the CPU rather than the GPU.
Demo: https://jsfiddle.net/njj43kz4/
HTML
<body>
<div id="front"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: 110%;
}
JavaScript
$('#front').animate({ backgroundSize: '100%' }, 1000);
Using a setTimeout as shown in this previous question's answer: Slight background zoom on DOM load? - this worked smoothly, however I cannot get it working when I change the width and height values to 100%. The image starts oversized before zooming out, but the oversized view is shown. I want the fixed 100%x100% view, and no extra scaling visible. I tried overflow: hidden but that isn't hiding the overflow. You can see this is happening as the scrollbars are appearing and ruining the effect.
Demo: http://jsfiddle.net/eHAuh/15/
HTML
<body>
<div id="front" class="scaled"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-position: 50% 50%;
overflow: hidden;
}
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
JavaScript
$(document).ready(function () {
$('#front').attr('class', 'animatable');
setTimeout(function () {
$('#front').removeClass('animatable');
}, 1000)
});
Any help would be great, and I hope the layout of this question is ok. I couldn't work out how to indent paragraphs without turning them into code indents. Thanks for reading and have a nice day.
Edit 1: The way this will execute when loaded is because the jQuery/JavaScript is in the $(window).load.
Edit 2: There was an answer suggesting to use keyframes, however these do not support IE9 and this would be preferable.
You can do it with css #keyframes if you want using scale
I have used pseudo class for adding background
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').addClass('active')
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
#front:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
transform: scale(2);
}
#front.active:after {
animation: animation 5s;
/* change the value 5s to what you want */
animation-fill-mode: forwards;
/* added so that it doesn't return to its original state which is scale(2)*/
}
#keyframes animation {
0% {
transform: scale(2);
}
100% {
transform: scale(1)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
As per your requirements it looks like you require this
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').animate({
width: '100%',
height: '100%'
}, 5000);
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#front {
position: relative;
top: 0;
width: 200%;
height: 200%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
in css change
#front
position: fixed;
or for body add
overflow: hidden;
Related
I am making a meet our team page where the card flips back when hovered over, shows the baby photo of a team member. The card flips back, except when I hover it over,
(mockup photo by the way) It goes from here
to here. as you can see, both card-front and the card back is visible. here are my css and react js. How can I fix it? thank you
JS
<div className="team-member">
<div className="card">
<div className="card-front">...</div>
<div className="card-back">...</div>
</div>
</div>
CSS
.team-member {
max-width: 20%;
perspective: 1000px;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
padding: 0 15px;
margin-bottom: 2.25rem;
}
.card {
position: relative;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card-back, .card-front {
width: 100%;
display: block;
backface-visibility: hidden;
}
.team-member__image {
padding-top: 100%;
position: relative;
margin-bottom: 1.25rem;
}
.team-member:hover .card {
transform: rotateY(180deg);
width: 100%;
display: block;
}
.team-member__image .img-holder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.team-member__image .img-holder img {
display: block;
width: 100vw;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
max-width: 100%;
max-height: 100%;
}
img {
border-style: none;
}
.card-back {
transform: rotateY(180deg);
}
I think that your problems is caused by "flipping" those images at the same time.
You don't use separate id's or classes to apply your hover effect, so both of them are considered "flipped" when you try to hover over.
When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
Please also tell how can i set rotation about an edge except center.
I know about transform-origin but nothing such as transform-axis.
I want that when i hover over the , these images should open like a window.
var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
left.style.transform="rotateY(70deg)";
right.style.transform="rotateY(-70deg)";
}
function back() {
left.style.transform="rotateY(0deg)";
right.style.transform="rotateY(0deg)";
}
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
}
<html>
<head>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
<script src="script/script.js"></script>
</body>
</html>
There seems to be an issue with perspective and the onmouseout. back() (in onmouseout) and curtain() (in onmouseover) are called quite inconsistently. onmouseout is called whenever the mouse moves outside the element (#animate in this case) or its children (the images). The children are animated - they move - and the onmouseout is thereby called multiple times.
I wouldn't recommend onmouseover / onmouseout for this - instead I would use CSS :hover.
That aside, transform-origin defines the center of rotation.
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
#animate {
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position: absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: left;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform-origin: right;
}
<div id = 'animate'>
<div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
<div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>
I don't know the origin of the problem, but it works ok if you are using CSS hover instead of JS hover.
And the transform origin is the way to go, it does what your wanted transform-axis would do.
#animate{
width: 400px;
height: 300px;
margin: auto;
position: relative;
perspective: 800px;
}
img {
width: 100%;
}
#left {
position:absolute;
top: 0;
right: 50%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: left center;
}
#right {
position: absolute;
top: 0;
right: 0%;
padding: 0;
margin: 0;
width: 50%;
transition: transform 0.5s;
transform: rotateY(0deg);
transform-origin: right center;
}
#animate:hover #left {
transform: rotateY(70deg);
}
#animate:hover #right {
transform: rotateY(-70deg);
}
<div id="animate" onmouseover="curtain()" onmouseout="back()">
<div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
</div>
I have a preloader splash page for my website that I would like to display upon load, and fade out after 2s, revealing the main website content below.
I have the below code, which work well to display the splash page upon window load, but I want to replace this with a simple 2s delay, so that it always appear, even for those on super fast connections. Currently it is fading out too quickly when on a fast connection.
Thanks.
HTML
<div class='preloader'>
<div class="preloader-logo">Logo</div>
<div class="preloader-loading-icon">Loading</div>
</div>
<main>Content goes here, should be hidden initially until fully loaded.</main>
CSS
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 9999;
background: rgba(255,102,51,1);
}
.preloader-logo {
background: url(images/ui-sprite.svg) no-repeat 0 -300px;
position: absolute;
width: 140px;
height: 58px;
top: 50%;
left: 50%;
text-indent: -9999px;
}
.preloader-loading-icon {
background: url(images/preloader-loading.svg) no-repeat 50%;
text-indent: -9999px;
position: relative;
top: 50%;
left: 50%;
margin-top: 90px;
width: 40px;
height: 40px;
}
main { opacity: 0; } Hide main content to avoid flash before preloader initialises */
JS
/* Preloader Splash */
$(window).load(function(){
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
});
Use setTimeout
$(window).load(function(){
setTimeout(function() {
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
}, 2000);
});
I am coding a loading screen with a div that slowly moves out of the screen. But it is twitching for reasons I do not know.
This is the code I am talking about:
function fadeLoadingScreen() {
$('#loadingBanner').animate({
bottom: "-15%",
opacity: 0
},
2000,
function() {
$('#loadingDiv').hide();
});
}
$(document).ready(function() {
fadeLoadingScreen();
});
#loadingDiv {
position: fixed;
width: 100%;
height: 100%;
background-color: white;
z-index: 10000;
}
#loadingBanner {
background-image: url("http://images.gofreedownload.net/thumps/crown-pattern-banner-erected-europeanstyle-vector-89228.jpg");
background-size: auto 100%;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
height: 15%;
width: 100%;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loadingDiv">
<div id="loadingBanner"></div>
</div>
https://jsfiddle.net/71btwr2j/
can anyone explain this behavior?
I have used an iframe to scale up my webpage. The problem is the scrollbar for my iframe does not allow me to scroll down the whole page. I am only able to view half of my page. How do I increase or change the size of the scrollbar slider so that I am able to scroll further down my page?
Here is my code:
CSS:
#wrapper {
width: 100%;
height: 100%;
padding: 0;
overflow: scroll;
}
#scaled-frame {
width: 100%;
height: 100%;
border: 0px;
}
#scaled-frame {
zoom: 1.30;
transform-origin: 50% 0%;
-moz-transform: scale(1.30);
-moz-transform-origin: 50% 0%;
-o-transform: scale(1.30);
-o-transform-origin: 50% 0;
-webkit-transform: scale(1.30);
-webkit-transform-origin: 50% 0%;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1;
}
}
HTML:
<body bgcolor="#000000">
<div id="wrapper"><iframe id="scaled-frame" src="videos_large.html"></iframe></div>
</body>
Try changing your transform-origin styles.
my approach would be to remove the overflow of the #wrapper, and instead apply the overflow to the #scaled-frame like so:
#wrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; }
#scaled-frame { width: 100%; min-height: 100% height: auto; border: 0px;overflow: hidden; overflow-y:scroll;}
Try overflow: scroll; in CSS.
HTML Markup
<iframe class="iFrameScroll"><\iframe>
CSS
.iFrameScroll {
overflow: scroll;
}
You shouldn't have this problem with iframe, unless there is a wrong code has been writing.
Thank you all, I will try your solutions. I have made the wrapper bigger than the scaled frame, which seems to have done it for now, but I will give your solutions a go.