I'm trying to create a particular effect but I'm getting stuck. Essentially what is supposed to happen is when the user clicks on the nav (in the snippet below, I've made it so you just click on the body) the:
main screen shrinks
an off canvas menu slides in from the left
A semi transparent overlay appears
My problem is with the scale effect. The effect I am trying to achieve is when the window shrinks, you can see the entirety of the window, just a miniature version. The closest I've been able to get is the snippet, where the window shrinks, but it's still fully scroll-able rather than the window shrinking proportionally to become a miniature version
The way I have it now, you can still scroll the entirety of the page but I'm going to take care of that with a e.preventDefault but I'd like to get the screen-shrink in order first.
Can anyone help?
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
}
.pc-active {
transform: scale3d(.9, .9, .1)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>
You can make use of margin-left to move the miniature to the offset of your sidenavbar on toggle, as well as scale it to your desired value by setting a minimum-height in terms of vh with transform-origin as top left.
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
text-align:center;
}
.pc-active {
margin-left:310px;
transform-origin:left top;
min-height:90vh;
transform: scale(0.4,0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container">
<h3> Page content</h3>
Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff
</div>
You can set the width/height in vw/vh unit to resize it according to the window
See code snippet:
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
}
.pc-active {
width: 90vw;
height: 90vh;
min-height: 90vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>
Related
Hello, I'm currently practicing coding my own site, but i've ran into a problem. I added an auto fade in scroll to top button which works fine on desktop, but on mobile once it's activated the scroll gets stuck at the top. Any idea whats causing it to get stuck, here is my coding.
Sorry in advanced, im very new to this.
The Script
<script>
const scrollTop = function () {
// create HTML button element
const scrollBtn = document.createElement("button");
scrollBtn.innerHTML = "↑";
scrollBtn.setAttribute("id", "scroll-btn");
document.body.appendChild(scrollBtn);
// hide/show button based on scroll distance
const scrollBtnDisplay = function () {
window.scrollY > window.innerHeight
? scrollBtn.classList.add("show")
: scrollBtn.classList.remove("show");
};
window.addEventListener("scroll", scrollBtnDisplay);
// scroll to top when button clicked
const scrollWindow = function () {
if (window.scrollY != 0) {
setTimeout(function () {
window.scrollTo(0, window.scrollY - 50);
scrollWindow();
}, 10);
}
};
scrollBtn.addEventListener("click", scrollWindow);
};
scrollTop(); scrollTop: scrolled;
</script>
</body>
</html>
</head>
</html>
CSS
section::after {
content: "";
display: table;
clear: both;
}
#scroll-btn {
opacity: 0;
width: 60px;
height: 60px;
color: #fff;
background-color: #c066c0;
position: fixed;
bottom: 10%;
right: 10%;
border: 2px solid #fff;
border-radius: 50%;
font: bold 40px monospace;
transition: opacity 0.5s, transform 0.5s;
overflow: hidden;
}
#scroll-btn.show {
opacity: 1;
transition: opacity 1s, transform 1s;
overflow: hidden;
}
Can anyone tell what the problem is?? Thanks so much!
A simple example of scroll to top
const scrollToTop = document.querySelector(".scroll-to-top");
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
scrollToTop.classList.add("visible");
} else {
scrollToTop.classList.remove("visible");
}
});
scrollToTop.addEventListener("click", () => {
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
});
#import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 200vh;
}
.scroll-to-top {
--size: 48px;
position: fixed;
border: 0;
right: 32px;
bottom: 32px;
z-index: 9999;
display: grid;
border-radius: 50%;
width: var(--size);
place-items: center;
height: var(--size);
aspect-ratio: 1/1;
transform: scale(0);
will-change: transform;
background-color: white;
transition: transform 250ms ease;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
}
.scroll-to-top svg {
width: 24px;
height: 24px;
pointer-events: none;
}
.scroll-to-top.visible {
transform: scale(1);
}
<button class="scroll-to-top">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path d="M448 368L256 144 64 368h384z" />
</svg>
</button>
Good, I’ve been an hour and I’m going crazy (I’m new)
I have a button that when pressed shows a div . Fixed sidemenu, this occupies 100% high and wide and contains two divs, one that does black background with some transparency and occupies everything and a white side menu.
I want that when you activate the open button or the close button or touch the black background transparently, the background and menu appear or disappear but with a transition and I do not know why it does not work, the menu with a side transition and the menu going from 0 to . 2 of opacity or vice versa when closed
See if anyone can explain why it does not work, thank you very much in advance :)
const sidemenu = document.getElementById('sidemenu')
const sidemenuContent = document.getElementById('sidemenu__content')
const abrirSidemenu = document.getElementById('sidemenu__open')
const cerrarSidemenu = document.getElementById('sidemenu__close')
const sidemenubg = document.getElementById('fondo-modal')
abrirSidemenu.addEventListener('click', () => {
sidemenu.classList.add('show-sidemenu')
sidemenuContent.classList.add('sidemenuContent__animation')
sidemenubg.classList.add('opacity__animation')
})
cerrarSidemenu.addEventListener('click', () => {
sidemenu.classList.remove('show-sidemenu')
sidemenuContent.classList.remove('sidemenuContent__animation')
sidemenubg.classList.remove('opacity__animation')
})
sidemenubg.addEventListener('click', () => {
sidemenu.classList.remove('show-sidemenu')
sidemenuContent.classList.remove('sidemenuContent__animation')
sidemenubg.classList.remove('opacity__animation')
})
.sidemenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fondo-modal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
background-color: black;
opacity: .0;
transition: .5s;
}
.sidemenu__content {
position: fixed;
top: 0;
left: -350px;
width: 350px;
height: 100%;
background-color: white;
z-index: 10;
padding: 5rem 2rem 0;
overflow-y: auto;
transition: .5s;
}
.show-sidemenu {
display: grid;
}
.sidemenuContent__animation {
left: 0;
}
.opacity__animation {
opacity: .2;
}
<div class="topmenu__left">
<button id="sidemenu__open">OPEN</button>
<div class="sidemenu" id="sidemenu">
<div class="fondo-modal" id="fondo-modal"></div>
<div class="sidemenu__content" id="sidemenu__content">
<button id="sidemenu__close">CLOSE</button>
</div>
</div>
The major issue is that you're trying to transition the display attribute, which cannot be transitioned: https://www.w3schools.com/cssref/pr_class_display.asp So instead, we'll define your display attribute as you like but we'll add the opacity and visibility attributes and make those our goal for transition. We'll also specify a timing operation with linear which you can change at your discretion (see: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) and we'll transition everything for the sake of keeping it simple since you don't have any real need for specificity here. Hope that helps, let me know if you have any questions :)
Edit: added a light-blue to the body just so you can see everything happening but you can take that out obviously.
const sidemenu = document.getElementById('sidemenu');
const sidemenuContent = document.getElementById('sidemenu__content');
const abrirSidemenu = document.getElementById('sidemenu__open');
const cerrarSidemenu = document.getElementById('sidemenu__close');
const sidemenubg = document.getElementById('fondo-modal');
abrirSidemenu.addEventListener('click', () => {
sidemenu.classList.add('show-sidemenu');
sidemenuContent.classList.add('sidemenuContent__animation');
sidemenubg.classList.add('opacity__animation');
});
cerrarSidemenu.addEventListener('click', () => {
sidemenu.classList.remove('show-sidemenu');
sidemenuContent.classList.remove('sidemenuContent__animation');
sidemenubg.classList.remove('opacity__animation');
});
sidemenubg.addEventListener('click', () => {
sidemenu.classList.remove('show-sidemenu');
sidemenuContent.classList.remove('sidemenuContent__animation');
sidemenubg.classList.remove('opacity__animation');
});
body {
background-color: lightblue;
}
.sidemenu {
display: grid;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: all 0.5s linear;
}
.fondo-modal {
display: block;
position: absolute;
visibility: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
background-color: black;
opacity: 0;
transition: all 0.5s linear;
}
.sidemenu__content {
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -350px;
width: 350px;
height: 100%;
background-color: white;
z-index: 10;
padding: 5rem 2rem 0;
overflow-y: auto;
transition: all 0.5s linear;
}
.show-sidemenu {
visibility: visible;
opacity: 1;
left: 0;
transition: all 0.5s linear;
}
.sidemenuContent__animation {
visibility: visible;
left: 0;
transition: all 0.5s linear;
}
.opacity__animation {
visibility: visible;
opacity: 0.2;
transition: all 0.5s linear;
}
<div class="topmenu__left">
<button id="sidemenu__open">OPEN</button>
<div class="sidemenu" id="sidemenu">
<div class="fondo-modal" id="fondo-modal">modal</div>
<div class="sidemenu__content" id="sidemenu__content">
<button id="sidemenu__close">CLOSE</button>
</div>
</div>
</div>
I have a simple div that simulates the ripple effect of material design along with "touchstart" and "touchend" events. But I don't know how to restart the animation if the user clicks several times.
.test-ripple{
position: relative;
display: flex;
align-items: center;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
}
.test-ripple:before {
display: none;
}
.test-ripple:after {
position: absolute;
content: "";
cursor: pointer;
background-image: none;
background-color: rgba(0, 0, 0, 0);
width: 78%;
height: 78%;
border-radius: 50%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
transform: scale(0.3);
transition: linear 350ms forwards;
}
.test-ripple.ativo:after {
background-color: rgba(0, 0, 0, 0.2);
transform: scale(1);
transition: 150ms;
}
.test-ripple.fade-out:after {
background-color: rgba(0, 0, 0, 0);
transition: 300ms;
}
<div class="test-ripple">
<i class="material-icons">add</i>
</div >
var ripple = document.querySelectorAll(".test-ripple")
ripple.forEach((item) => {
item.addEventListener("touchstart", () => {
item.classList.add("ativo");
});
item.addEventListener("touchend", () => {
setTimeout(function () {
item.classList.add("fade-out");
setTimeout(function () {
item.classList.remove("ativo");
item.classList.remove("fade-out");
}, 150);
}, 100);
});
});
How to make the transition repeat each time the user clicks?
Hmmm with what I have seen so far their no special code for that, just write your code add only one call function from the animation to start so when the user click's again it definitely will restart automatically
I'm using a CSS hover effect that I found on Codrops in my web portfolio's work page. At mobile resolutions, the elements' animation is activated by clicking the hyperlinked image, but the transition doesn't always have time to complete before loading the next page.
Is there a way to utilize JavaScript/jQuery to delay the loading of a page/website at mobile resolutions?
Update:
I've combined Yaseen Ahmed's solution below with a jQuery-based StackOverflow solution that I finally ran across for a perfect solution to my problems.
$(document).ready(function() {
$('.delay').click(function(e) {
if (window.innerWidth < 768) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 2500);
} else {
window.location.assign($a.attr('href'));
}
});
});
section {
width: 600px;
height: 400px;
}
figure {
cursor: pointer;
}
figure.apollo {
position: relative;
float: left;
overflow: hidden;
width: 100%;
background: #c3589e;
}
figure.apollo img {
position: relative;
display: block;
height: auto;
width: 100%;
opacity: 0.8;
}
figure.apollo figcaption {
padding: 2rem;
backface-visibility: hidden;
}
figure.apollo figcaption::before,
figure.apollo figcaption::after {
pointer-events: none;
}
figure.apollo figcaption,
figure.apollo figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
}
figure.apollo figcaption>a {
z-index: 5;
white-space: nowrap;
span {
opacity: 0;
}
}
figure.apollo img {
opacity: 0.95;
transition: opacity 0.35s, transform 0.35s;
transform: scale3d(1.1, 1.1, 1);
}
figure.apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: transform 0.6s;
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}
figure.apollo figcaption p span {
margin: .25rem 0;
padding: 0 .5rem;
display: inline-block;
background-color: #ffffff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
figure.apollo:hover img {
opacity: 0.6;
transform: scale3d(1, 1, 1);
}
figure.apollo:hover figcaption::before {
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<p>Make sure you shrink your viewport width to less than 768px before testing the link delay.</p>
<figure class="apollo">
<img src="https://www.tylerfuller.me/assets/images/sakura.jpg" alt="Cherry Blossoms" />
<figcaption>
<p><span>This is a link to the</span><br />
<span>pure CSS Sakura</span><br />
<span>theme / framework.</span></p>
<a class="delay" href="https://oxal.org/projects/sakura/"></a>
</figcaption>
</figure>
</section>
</body>
All you need to create the java script function in your project see in code.
your hyper link
java script function
function loadpage() {
if (window.innerWidth < 768) {
setTimeout(function(){
location.href="your_url";
}, 1000);
} else {
location.href="your_url";
}
}
What will this function do when your screen width is less then 768 it will load url after one second and if grater then it will load url without delay.
Note : When you resize the screen width must reload the page.
I have a span that is positioned absolutely in a div. The span is wider than the div, with an overflow of hidden, so I want to animate the span to the position right: 0; similar to a marquee effect.
How do I get it to slide from the starting position, to the position of right: 0;?
CSS
.auto-option__name-container {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
#include font-paragraph;
overflow-x: hidden;
position: relative;
height: 1.618em;
width: 11em;
background-color: red;
}
.animateLongName{
-webkit-animation: marquee 2s ease-in-out infinite;
position: absolute;
background-color: rgba(255,255,255,0.4);
white-space: nowrap;
}
#-webkit-keyframes marquee {
0% { right: auto; }
100% { right: 0px; }
}
HTML
<body>
<div class="auto-option__name-container">
<span class="animateLongName">
This is a really long name that won't fit in the div
</span>
</div>
</body>
JSFiddle
http://jsfiddle.net/WM9nQ/16/
As Far I know you can't animate using an auto value. One option can be use transform property instead. Check this:
.auto-option__name-container {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
#include font-paragraph;
overflow-x: hidden;
position: relative;
height: 1.618em;
width: 11em;
background-color: red;
}
.animateLongName {
-webkit-animation: marquee 4s ease-in-out infinite;
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
}
#-webkit-keyframes marquee {
0% {
transform: translateX(100%)
}
100% {
transform: translateX(-100%)
}
}
<div class="auto-option__name-container">
<span class="animateLongName">
This is a really long name that won't fit in the div
</span>
</div>
By using jQuery animate:
var longName = $(".animateLongName");
var parent = longName.parent();
var difference = parent.width() - longName.width();
var margin = 10;
function animateSpan() {
longName.animate({ left: difference-margin}, { duration: 5000, complete: function(){animateSpanBack()} });
}
function animateSpanBack() {
longName.animate({ left: margin}, { duration: 5000, complete: function(){animateSpan()} });
}
if (difference < 0) animateSpan();
Fiddle:
http://jsfiddle.net/WM9nQ/18/
I have made the animation working. Note: I have used :after selector to hide the overflowing text; refer the css style.
DEMO: http://jsfiddle.net/nvishnu/WM9nQ/29/