I want to expand a div to full screen on clicking on it. Just like
this Fiddle js link here
I want to animate the same from its position. if I click the box it feels like expanding from its position please help me to achieve that
$('.myDiv').click(function(e){
$(this).toggleClass('fullscreen');
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>
Fullscreen animation
Now making a element fullscreen is pretty simple. It could be done with css alone.
.content {
display: inline-grid;
width: 150px;
height: 100px;
background-color: cornflowerblue;
border-radius: 3px;
transition: width 2s, height 2s;
margin: 10px;
}
.content button {
display: inline-block;
justify-self: center;
align-self: center;
height: 2em;
}
.content:hover {
width: 100vw;
height: 1200vh;
}
<div class="container">
<div class="content">
<button>Fullscreen</button>
</div>
</div>
<div class="content"></div>
Just adding a transition will make the element brake the layout.
To not break a layout you need:
Replace the element. (Below the Visibility : hidden element).
Give it an Absolute position.
Then set its width to fullscreen and animate its position so it can cover it.
Added an animation, transition
//Function is run on page load
$(function() {
var full = $(".fullscreen");
//Loops over all elements that have the class fullscreen
full.each(function(index, elem) {
$(elem).click(fullscreenClick);
});
function fullscreenClick() {
//The button is this
//We want to clone the parent
var box = $(this).parent();
//create a holder box so the layout stays the same
var holder = $(box).clone(false, true);
//and make it not visible
$(holder).css({
"visibility": "hidden"
});
//Get its position
var pos = $(box).position();
//Substitute our box with our holder
$(box).before($(holder));
//Set the position of our box (not holder)
//Give it absolute position (eg. outside our set structure)
$(box).css({
"position": "absolute",
"left": pos.left + "px",
"top": pos.top + "px",
});
//Set class so it can be animated
$(box).addClass("fullscreen");
//Animate the position
$(box).animate({
"top": 0,
"left": 0,
}, 3000);
}
});
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
.container .element {
display: inline-block;
background-color: cornflowerblue;
margin: 5px;
padding: 10px;
width: 70px;
height: 30px;
transition: width 3s, height 3s;
;
}
.container .element.fullscreen {
width: calc(100vw - 30px);
height: calc(100vh - 30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
<div class="element">
<button class="fullscreen">Fullscreen</button>
</div>
</div>
You can add animation on all styles changes adding next properties to myDiv class:
/* Animate all changes */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
I will show the changes on your example:
$('.myDiv').click(function(e)
{
$(this).toggleClass('fullscreen');
});
.myDiv{
background:#cc0000;
width:100px;
height:100px;
float:left:
margin:15px;
/*Animations*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
my div 1
<button>Full Screen</button>
</div>
<div class="myDiv">
my div 2
<button>Full Screen</button>
</div>
It's a bit of a complicated task, but this should give you an idea of how it's done. This code will run into some issues (clicking quickly will stack setTimeout) but does the basics.
The idea is that you calculate the current position of the element with getBoundingClientRect() and set initial position values with that, so that when you adjust the position to fixed, it will look as though it's still in the same spot - then when you override those values with the .fullscreen css, the transition property will allow them to animate.
The biggest issue here, which you'll notice if you click on the first div, is that it disappears from the layout and causes the second div to jump up to where it was, you'd probably need a way of preserving the layout. Hopefully this is helpful as a starting point anyway.
function getPosition(elem){
const rect = elem.getBoundingClientRect()
return {
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height
}
}
function toPx(val){
return [val, 'px'].join('')
}
$('.myDiv').click(function(e){
if(this.classList.contains('fullscreen')){
this.classList.remove('fullscreen')
setTimeout(e => this.style.position = 'static', 1000)
//close
} else {
//open
let pos = getPosition(this)
this.style.width = toPx(pos.width)
this.style.height = toPx(pos.height)
this.style.top = toPx(pos.top)
this.style.left = toPx(pos.left)
console.log(pos)
this.classList.add('fullscreen')
this.style.position = 'fixed'
}
});
.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}
.myDiv.fullscreen{
z-index: 9999;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
}
.animateTransitions {
transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv animateTransitions">
my div
<button>Full Screen</button>
</div>
<div class="myDiv animateTransitions">
my div 2
<button>Full Screen</button>
</div>
Here's how i made it:
JQuery: 3.6.0
Css preprocessor: SCSS
CSS Framework: Bootstrap 5.1.0
See it in action:
https://codepen.io/illegalmexican/pen/NWYNVvg
Please note that i was answering a JQuery post. The fowlloing could be made in Vanilla Javascript for better performance. Also keep in mind that this could also be improved in terms of Accessibility standars by having a close button.
Html:
<div class="myDiv-Container">
<div class="row">
<div class="col-6">
<div class="d-flex flex-wrap position-relative">
<div class="myDiv w-50">
<div class="front bg-primary top-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-success top-right">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-danger bottom-left">
<h1>Hello<br>World</h1>
</div>
</div>
<div class="myDiv w-50">
<div class="front bg-warning bottom-right">
<h1>Hello<br>World</h1>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS:
.myDiv-Container {
height: 500px;
width: 500px;
position: relative;
}
.front {
position: relative;
text-align: center;
display: flex;
&.position-absolute {
z-index: 1;
}
&.top-left {
top: 0;
left: 0;
}
&.bottom-left {
bottom: 0;
left: 0;
}
&.top-right {
top: 0;
right: 0;
}
&.bottom-right {
bottom: 0;
right: 0;
}
}
JQuery:
document.addEventListener('DOMContentLoaded', function () {
jQuery('.myDiv').each(function () {
var frontElem = jQuery(this).find('.front');
jQuery(this).on("click", function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery(frontElem).animate(
{
width: jQuery(this).width(),
height: jQuery(this).height(),
},
500, function() {
jQuery(frontElem).removeClass('position-absolute');
jQuery(frontElem).css({
width: '100%',
height: '100%',
});
});
} else {
jQuery(frontElem).css({
width: jQuery(this).width(),
height: jQuery(this).height(),
});
jQuery(frontElem).addClass('position-absolute');
jQuery(this).addClass('active');
jQuery(frontElem).animate({
'width': '100%',
'height': '100%',
}, 500);
}
});
});
});
Related
Here is my HTML, CSS, JS
const Col = document.querySelectorAll('.col')
function onCol() {
Col.forEach(function(el, idx) {
el.style.transition = '0s';
el.style.height = '0%';
el.style.transition = '0.9s';
el.style.height = '100%';
});
}
onCol()
.work {
display: flex;
height: 140px
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
max-height: 0
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
I think that columns should become bigger SMOOTHLY WITH TRANSITION 0.9 !!!
but they do not.
If I type the word with el.style.height = '100%'; into setTimeOut, it will work.
but I don't want to make this in callback queue.
I just want to solve this in the call stack.
and I want to know why doesn't this work now.
i changed this with for loop. but not works
Gloomy Young
set the intial height to 0, run function only after body is loaded and set desired transition duration and target height in func,
css
.work {display: flex; height: 140px}
.col {
background: red;
width: 20px;
margin-left: 5px;
height: 0;
}
javascript
window.onload = () => {
document.querySelectorAll('.col').forEach(i => {
i.style.transition = '1s';
i.style.height = '100%';
});
}
If you want not to use javascript. You can achieve this only using css animations.
I would modify your code to do this mostly in CSS, using classes on the parent element to toggle the effect. Here I've used setInterval just to give an idea of what's happening.
Below that is a way of making it so that each bar animates in its own time.
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 1500);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
transition: height 0.9s;
}
.work.hide .col {
height: 0;
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 5000);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 140px;
margin-left: 5px;
}
.col:nth-child(1) {
transition: height 0.9s 0s;
}
.col:nth-child(2) {
transition: height 0.9s 1s;
}
.col:nth-child(3) {
transition: height 0.9s 2s;
}
.col:nth-child(4) {
transition: height 0.9s 3s;
}
.col:nth-child(5) {
transition: height 0.9s 4s;
}
.work.hide .col {
height: 0;
}
<div class="work hide">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
I am trying to create an animated sidebar. Initially i have a top navbar, a sidebar and a content div. Sidebar and content divs are inside a container div which has display flex row property. I am confused about transition. I want the sidebar show and hide when nav home is clicked which has a sliding effect. Right now I have a sliding sidebar but the content div is not getting full width of its parent when sidebar hides. How can I do this? Should I apply transition on flex or on transform? Any help is appreciated.
<body>
<nav>
<ul>
<li><button id="home">Home</button></li>
<li><button>Services</button></li>
<li><button>Operations</button></li>
<li><button>About</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
<div class="container">
<div id="sidebar" class="sidebar visible">
<ul>
<li><button>Inventories</button></li>
<li><button>Employees</button></li>
<li><button>Feedback</button></li>
<li><button>Projects</button></li>
</ul>
</div>
<div class="content" id="content">
LOrem issum dolor sit amet
</div>
</div>
</body>
nav{
width: 100%;
display: flex;
justify-content : center;
}
.container{
display: flex;
flex-direction: row;
}
.sidebar{
flex:1;
background-color: rgb(40,100,250);
height: 100vh;
transition: transform 0.5s linear;
transform: translatex(-100%);
}
.visible{
transform: translatex(0);
flex: 1;
}
.content{
background-color: rgb(33,31,31);
flex: 5;
text-align: center;
color: #fff;
transition: flex 0.5s ease-in-out;
}
.afterContent{
flex: 10;
}
const homeButton = document.getElementById("home");
const sidebarDiv = document.getElementById("sidebar");
const content = document.getElementById("content");
homeButton.addEventListener("click", () => {
if (sidebarDiv.classList.contains("visible")) {
sidebarDiv.classList.remove("visible");
if(!content.classList.contains("afterContent")){
content.classList.add("afterContent");
}
} else {
sidebarDiv.classList.add("visible");
if(content.classList.contains("afterContent")){
content.classList.remove("afterContent");
}
}
});
Problem is that you just transform element, transforming will not change layout structure, it only affects element that you apply transform to and all its children.
Usually to achieve the result you want padding and position: absolute.
You have your sidebar element, that is position: absolute; top: 0; bottom: 0; left: 0;. To hide it you just transform it to the left. And then you have your content element that offsets menu with padding-left.
Here is a simple demo:
<html>
<head>
<style>
html, body {margin: 0; padding: 0}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.body {
position: relative;
}
.sidebar {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
width: 300px;
transition: transform 0.2s;
}
.content {
padding-left: 300px;
min-height: 500px;
background-color: teal;
transition: padding-left 0.2s;
}
.menu-closed > .sidebar {
transform: translateX(-300px);
}
.menu-closed > .content {
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">header menu</div>
<div id="body" class="body">
<nav class="sidebar">sidebar menu</nav>
<div class="content"><button onclick="menu()">nav</button> content</div>
<div>
<script>
const body = document.getElementById("body");
let menuClosed = false;
function menu() {
menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed");
menuClosed = !menuClosed;
}
</script>
</body>
</html>
I came across this website's work page and would like to recreate the xray effect of each of the card element.
Here's my code for the xray effect: https://codepen.io/carljustineoyales/pen/yLMEVYd
HTML
<section class="banner">
<h1>this is a banner page</h1>
</section>
<section class="projects" id="projects">
<div class="cardlist" >
<div class="cardlist__grid" >
<div class="card" id="card" onmouseover="setSize()" onmouseout="resetSize()">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card" id="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
<div class="cardlist--skeleton" id="skeleton">
<div class="cardlist--skeleton--bg"></div>
<div class="cardlist__grid">
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
<div class="card">
<div class="card__category">
category
</div>
<div class="card__thumbnail card__thumbnail--black">
</div>
<div class="card__info">
<div class="card__title">title</div>
<div class="card__date">date</div>
</div>
</div>
</div>
</div>
</section>
</body>
SCSS
* {
margin: 0;
padding: 0;
}
.banner {
height: 100vh;
}
.projects {
max-width: 1440px;
width: 100%;
margin: 100px auto;
// padding: 100px 0;
position: relative;
}
.cardlist {
width: 100%;
color: #000;
&__grid {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&--skeleton {
--x: 0;
--y: 0;
--size: 0px;
clip-path: circle(var(--size) at var(--x) var(--y));
user-select: none;
pointer-events: none;
// clip-path: circle(100px at 0 0);
// clip-path: circle(300px at 0% 0%);
transition: clip-path 0.1s ease;
&--bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #838383;
z-index: -1;
}
width: 100%;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 1;
background-color: #838383;
}
}
.card {
padding: 50px;
&__thumbnail {
width: 500px;
height: 644px;
background-color: #838383;
&--black {
background-color: #000;
}
}
}
JS
let mouseX=0
let mouseY=0
let size = 0;
const projects = document.querySelector('#projects');
function setSize() {
size = 200
skeleton.style.setProperty('--size', size + "px");
}
function resetSize() {
size = 0
skeleton.style.setProperty('--size', size + "px");
}
function updateCoordinates(event) {
mouseX = event.pageX - projects.offsetLeft ;
mouseY = event.pageY - projects.offsetTop ;
skeleton.style.setProperty('--x', mouseX + "px");
skeleton.style.setProperty('--y', mouseY+ "px");
}
The problem is that I can't seem to find a solution for the updating cursor position while scrolling, also the hover animation became laggy when you open the console. Is there a way to update the cursor position on scroll and why the animation became laggy when the console is open.
I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})
You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv
I want to expand and decrease height of header when I press click on div "arrow". I've tried to addClass with Jquery, but it doesn't really work
HTML:
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>
CSS
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
transition: height 0.5 ease;
}
expandheight {
height: 850px;
}
JQuery:
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').addClass('expandheight');
});
});
});
I don't know how I can decrease height now with the same button, to remove "expandheight" class when it is active and add it when it is not... I've tried if/else, I failed.
You have multiple syntax errors:
expandheight should be styled using .expandheight
use cross browser animation properties
use toggleClass to add/remove class
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').toggleClass('expandheight');
});
});
});
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
-webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
transition:height 0.5s ease;
}
.expandheight {
height: 850px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>
If you want to expand and decrease the height of the header, use toggleClass() rather than using addClass()
jQuery(document).ready(function() {
jQuery(function() {
jQuery('#arrow').click(function() {
jQuery('header').toggleClass('expandheight');
});
});
});
Also, you had a few errors in your code. I have created a jsfiddle to show you it working.
https://jsfiddle.net/7yodz723/
(I put a border around the arrow just so we can clearly see the example working)
Just use toggle class to switch classes.
$(document).ready(function() {
$(function() {
$('#arrow').click(function() {
$('header').toggleClass('expandheight');
});
});
});
header {
background: #2282A4;
color: #fff;
text-align: center;
width: 100%;
height: 450px;
transition: height 0.5 ease;
}
.expandheight {
height: 850px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<p>The title..</p>
<h1>Some text</h1>
<div class="arrow" id="arrow">
<img src="img/arrow.svg" />
</div>
</header>