I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/
So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.
$(function() {
$(".block").on("click", function() {
$(this).addClass("fullscreen");
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.block {
width: 50%;
margin: 0 auto 50px auto;
height: 300px;
background-color: red;
transition: all 0.5s linear;
}
.block.fullscreen {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj
make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.
Here's a working snippet.
var isFullscreen = false;
$("#block").click(function (){
var prop = {};
var speed = 910;
if(!isFullscreen){ // MAXIMIZATION
prop.width = "100%";
prop.height = "100vh";
isFullscreen = true;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","absolute");
}, 920);
}
else{
prop.width = "50%";
prop.height = "250px";
isFullscreen = false;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","relative");
}, 920);
}
});
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#block,#blockTwo{
width:50%;
height:250px;
margin:0 auto;
background-color: red;
}
#block{
z-index:100;
}
#blockTwo{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>
<div id="blockTwo"></div>
Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.
When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method.
Along with animating top & left, you should animate width & height as well for a smoother look.
.in-animation {
animation: inlightbox 0.8s forwards;
position: fixed !important;
}
#keyframes inlightbox
{
50% {
width: 100%;
left: 0;
height: 200px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:
<html>
<head>
<style>
.image {
margin: 0px;
transition: all 0.5s linear;
background-image: url('https://tse2.mm.bing.net/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
background-repeat: no-repeat;
}
.image.small {
width: 200px;
height: 100px;
background-size: cover;
background-size: 100% 100%;
}
.image.fullScreen {
width: 100%;
height: 100%;
background-size: cover;
background-size: 100% 100%;
}
.topContent {
display: contents;
}
.bottomContent {
display: contents;
}
.topContent.remove {
display: none;
}
.bottomContent.remove {
display: none;
}
</style>
</head>
<body>
<div class="topContent">
<h1>Hello</h1>
</div>
<div class="image" onclick="imageChange()"></div>
<div class="bottomContent">
<h1>Hello</h1>
</div>
<script>
window.onload = function() {
document.querySelector('.image').classList.add('small')
}
function imageChange() {
if (document.querySelector('.image').classList.contains('small')) {
document.querySelector('.image').classList.remove('small')
document.querySelector('.image').classList.add('fullScreen')
document.querySelector('.topContent').classList.add('remove')
document.querySelector('.bottomContent').classList.add('remove')
} else {
document.querySelector('.topContent').classList.remove('remove')
document.querySelector('.bottomContent').classList.remove('remove')
document.querySelector('.image').classList.remove('fullScreen')
document.querySelector('.image').classList.add('small')
}
}
</script>
</body>
</html>
If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.
Related
I am trying to implement a simple Imageviewer that displays an image that fits screen and when clicked, the image shoud be shown in fullsize.
Everything almost works, but when image is displayed in full-size, there are no scrollbars, so I can only see the center of the image and not explore the rest.
const image = document.getElementById("image");
const imageContainer = document.getElementById("image-container");
image.addEventListener("click", function() {
if (image.classList.contains("full-size")) {
image.classList.remove("full-size");
imageContainer.classList.remove("full-size");
} else {
image.classList.add("full-size");
imageContainer.classList.add("full-size");
}
});
#image-container {
position: relative;
width: 100%;
overflow: hidden;
}
#image {
width: 100%;
height: auto;
transition: transform .5s;
cursor: zoom-in;
}
#image.full-size {
cursor: zoom-out;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 10;
transform: scale(2);
}
#image-container.full-size {
overflow: auto;
}
<div id="image-container">
<img id="image" src="https://bigbookofamigahardware.com/bboah/media/download_photos/cybervisppc_4_big.jpg">
</div>
The implementaion can be seen here:
https://codepen.io/bobittjek/pen/qBMWpdy
What I'm trying to achieve here is that when I scroll on a particular div here .ball, it should scale up to 1.5.
but when I'm not scrolling on that ball div it should shrink down to it's original height and width.
Here I'm using window method to do this trick and as soon as I scroll ball scale up which isn't what I'm trying to do. What can I use instead of window method and is there any other approach to do achieve this?
const ball = document.querySelector('.ball');
window.addEventListener('scroll', ()=> {
if (scroll) {
ball.classList.add('active');
} else {
ball.classList.remove('active');
}
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>
I would use a setTimeout function to remove the class after a short period after the scroll. Do not forget to clear the timeout otherwise it will lead to weird behaviour. (as suggested by Lakshya when I was answering to the question).
To make the ball smoothly transition, I would add a css transition as shown bellow.
const ball = document.querySelector('.ball');
const container = document.querySelector('.container')
let scrollTimeout;
container.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'), 100);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
transition: transform 0.3s ease;
position: fixed;
top: 50px;
left: 50px;
}
.ball.active {
transform: scale(1.5);
}
.container{
width: 100%;
background: red;
overflow: scroll;
height: 500px;
}
.inside_container{
position: relative;
width: 100%;
height: 2000px;
}
<div class="container">
<div class="inside_container">
<div class="ball"></div>
</div>
</div>
One of the approaches could be delaying the removal of .active class on ball by 200ms such that each time you try to scroll again, the timer is cleared and a new one starts to do the same. A debounce approach in a nutshell.
const ball = document.querySelector('.ball');
let scrollTimeout;
window.addEventListener('scroll', ()=> {
ball.classList.add('active');
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(()=> ball.classList.remove('active'),200);
});
.ball {
height: 200px;
width: 200px;
border-radius: 100%;
background-color: orange;
}
.ball.active {
transform: scale(1.5);
position: fixed;
}
body {
height: 150vh;
}
<div class="ball"></div>
Ok so Im new to jQuery and a little confused how to achieve my goal here. The goal is whenever the browser is less than 780px wide I want to disable all hover effects. So I did a lot of research and still cant figure out a specific way that works for me, though I have come close. Below is the jQuery and HTML. So the class .allHover is what is triggering the hover effects. So I thought to remove the hover effect when the browser is less than 780px I would use a .removeClass method which would break the hover effect. The jQuery code below works, however when I resize the window to less than 780 px then refresh my browser the hover effect comes back and I dont want that. Is there something I can add to ensure the class .allHover doesnt come back when the page is less than 780px wide and the page is refreshed? Thank you in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).on("load resize", function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
});
</script>
<style>
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
div.allHover:hover .stockDesign_image, div.allHover:hover .customDesign_image {
width: 360px;
}
.prodBoxes_header {
background-color: #4c2e90;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
</style>
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>
You need to call the hiding functionality also when the page is loaded. This can be done in the ready-function. I moved the hdiding funtionality to fucntion checkViewportWidth and call in both cases.
It seems that on('load') is not executed on page refresh.
$(document).ready(function() {
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
}
$(window).on('load resize', function mobileViewUpdate() {
checkViewportWidth();
});
checkViewportWidth();
});
Please see also Plunker
An example of how to accomplish this with media queries (given the hover effect is done with css.) The style will only work when screen size is <780.
#media only screen and (min-width: 780px) {
.allHover:hover {
...
}
}
But if you need this to be js, you'll just need to add an else:
function checkViewportWidth() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth <= 780) {
$(".allHover").removeClass("allHover").addClass("gallery-mobile");
}
else{
$(".allHover").addClass("allHover").removeClass("gallery-mobile");
}
}
A CSS only approach would be to add your :hover CSS in a #media query with min-width: 780px since you want :hover effects to fire when the window is > 780px.
#media (min-width: 780px) {
div.allHover:hover .stockDesign_image,
div.allHover:hover .customDesign_image {
width: 360px;
}
div.allHover:hover .prodBoxes_header {
background-color: #5E3EA6;
}
div.allHover:hover .prodBoxes_headerright {
background-color: #fb8332;
}
div.allHover:hover .viewAll_button {
background-position: 0 -34px;
}
}
.stockDesign_image, .customDesign_image {
width: 340px;
height: 382px;
margin: 30px auto;
transition: all 0.2s ease-in-out;
}
.prodBoxes_header {
background-color: #4c2e90;
}
.prodBoxes_headerright {
background-color: #ff6600;
}
.viewAll_button {
background-image: url(images/VIEW-ALL.png);
width: 141px;
height: 34px;
float: right;
overflow: hidden;
position: relative;
margin: 8px 5px 0 0;
}
<div class="allHover">
<div class="prodBoxes_header">
<p class="medalHeader_text">CHOOSE FROM<br>1000+Insert designs...</p>
</div>
<div class="stockDesign_image"></div>
<div class="prodBoxes_footer">
<p class="footer_asLOWas">as low as <span class="asLOWas_price">$<?=($prod[1]->sale_price ?: $prod[1]->aslow_price);?></span></p>
<div class="viewAll_button"></div>
</div>
</div>
I'm trying to change the background image using javascript. I've set the background up like this;
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('http://www.dafont.com/forum/attach/orig/1/6/166803.jpg');
background-size: cover;
z-index: -1; /* Keep the background behind the content */
height: 100%; width: 100%; /* Using Glen Maddern's trick /via #mente */
transform: scale(1);
filter: blur(13px);
}
I'm using the above CSS to create a background image with a blur that does not affect elements placed above it. This works. My issue is I would like to change the background image at random intervals. I am unable to do so. I have used;
document.body.style.backgroundImage
$('body').css( 'background-image', artUrl );
document.getElementById('body')
All have failed, I think the issue maybe due to the fact the image is set in body:before. Is there anyway to change the background image using javascript and still be able to have a blur without effecting elements above it? Any help would be appreciated.
You are correct that it has something to do with the pseudo element. Unfortunately there isn't a way to manipulate this with JavaScript. You could, however, use JavaScript to create a style tag that would have a higher specificity.
var css = 'body:before { background: url(\'dblogo_150.png\') }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
You can just create new classes with attached pseudo elements to do this, and use Javascript to switch between them. For example your CSS might look like:
.background--first:before {
background: url(first.jpg);
}
.background--second:before {
background: url(second.jpg);
}
.background--third:before {
background: url(third.jpg);
}
Use a separate element that you'll blur;
don't use body neither body:before or :after, why complicate, right?!
Use several child elements, hide all but first, set a transition and a .show in CSS, handle (actually toggle) that class using JS (jQuery in our case)
/**
* BACKGROUND FADER
*/
(function(){
var $slides = $("#background").children(),
tot = $slides.length, // how many slides
c = 0, // simple counter
itv;
function anim() {
c = ++c % tot; // c = random? Do what you like
$slides.removeClass("show").eq( c ).addClass("show");
}
itv = setInterval(anim, 3000); // Start loop!
}());
/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
body{
color:#fff;
background: black;
}
#background{
position: fixed;
top:0; left:0;
height: 100%; width: 100%;
z-index: -999;
filter: blur(10px);
overflow:hidden;
}
#background > div{
position: absolute;
top:0; left:0;
height: 100%; width: 100%;
background: none 50% / cover;
transition: 1s; -webkit-transition: 1s;
}
#background > div + div{ /* all but first one */
opacity: 0;
}
#background > div.show{ /* class handled by jQuery */
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background">
<div style="background-image:url(http://placehold.it/800x600/0bf/fff?text=0);"></div>
<div style="background-image:url(http://placehold.it/800x600/f0b/fff?text=1);"></div>
<div style="background-image:url(http://placehold.it/800x600/0fb/fff?text=2);"></div>
</div>
<!-- put other page content here. -->
<h1>Hello world</h1>
Edited : There is no way to select the pseudo element, but you can add style to the page like this:
try change this:
$('body').css( 'background-image', artUrl );
To
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
The style appends to the page will override the one in css file.
var src = 'https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif';
$('body').append('<style>body:before{background: url(' + src + ')}</style>');
body {
background: black;
overflow-x: hidden;
overflow-y: hidden;
}
body:before {
overflow-x: hidden;
overflow-y: hidden;
content: "";
position: absolute;
background: url('https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size: cover;
z-index: -1;
height: 100%; width: 100%;
transform: scale(1);
filter: blur(13px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head></head>
<body></body>
</html>
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.