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.
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>
I am working on a project of mine and was playing around with the idea to make a custom cursor for my webpage.
Unfortunately, it seems that I can't get it to work.
Can someone tell me what I am doing wrong here?
I am using simple HTML, CSS and Javascript.
I think it is the Javascript that's not working, but I have tried to use a debugger but no luck.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
cursor: none;
}
body {
background: #000;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.custom-cursor {
position: fixed;
top: -18px;
left: -18px;
display: block;
width: 120px;
height: 120px;
pointer-events: none;
will-change: transform;
z-index: 998;
-webkit-transform: matrix(1, 0, 0, 1, -100, -100);
transform: matrix(1, 0, 0, 1, -100, -100);
opacity: 0;
mix-blend-mode: difference;
transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
opacity 0.4s ease;
}
.custom-cursor .cursor {
transform: scale(0.45);
transition: transform 0.5s ease;
will-change: transform;
width: 120px;
height: 120px;
float: left;
border-radius: 100%;
margin-top: -40px;
margin-left: -40px;
background: #fff;
}
.custom-cursor.custom-cursor-active .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.custom-cursor.custom-cursor-active-img {
z-index: 1010;
}
.custom-cursor.custom-cursor-active-img .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
background: #ff0;
}
body:hover .custom-cursor {
opacity: 1;
}
#media screen and (max-width: 1200px) {
.custom-cursor {
display: none !important;
}
}
.center {
padding: 30vh;
text-align: center;
width: 100%;
position: relative;
z-index: 9999;
}
.content {
padding: 1em;
font-family: sans-serif;
font-size: 3em;
background: #000;
min-height: 100vh;
}
.content::before {
position: fixed;
background: #ff0;
mix-blend-mode: multiply;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
pointer-events: none;
}
.img-wrapper {
max-width: 450px;
padding: 100px 0;
}
.img {
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<div class="content">
<div class="custom-cursor" data-custom-cursor>
<div class="cursor"></div>
</div>
<h1>hello world</h1>
link 0 / link 1 /
link 2 / link 3 /
link 4 / link 5 /
link 6 / link 7 /
link 8 .
</div>
<script>
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.setAttribute(
"style",
"top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
);
});
var $c = $("[data-custom-cursor]");
var $h = $("a, button");
var $i = $("img");
$(window).on("mousemove", function (e) {
x = e.clientX;
y = e.clientY;
console.log(x, y);
$c.css("transform", "matrix(1, 0, 0, 1, " + x + "," + y + ")");
});
$h.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active");
});
$h.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active");
});
$i.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active-img");
});
$i.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active-img");
});
//# sourceURL=pen.js
</script>
</body>
</html>
The code seems to work (at least, it does things though I don't know if they are the right things) as long as jquery is also loaded.
<html lang="en"><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
cursor: none;
}
body {
background: #000;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.custom-cursor {
position: fixed;
top: -18px;
left: -18px;
display: block;
width: 120px;
height: 120px;
pointer-events: none;
will-change: transform;
z-index: 998;
-webkit-transform: matrix(1, 0, 0, 1, -100, -100);
transform: matrix(1, 0, 0, 1, -100, -100);
opacity: 0;
mix-blend-mode: difference;
transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
opacity 0.4s ease;
}
.custom-cursor .cursor {
transform: scale(0.45);
transition: transform 0.5s ease;
will-change: transform;
width: 120px;
height: 120px;
float: left;
border-radius: 100%;
margin-top: -40px;
margin-left: -40px;
background: #fff;
}
.custom-cursor.custom-cursor-active .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.custom-cursor.custom-cursor-active-img {
z-index: 1010;
}
.custom-cursor.custom-cursor-active-img .cursor {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
background: #ff0;
}
body:hover .custom-cursor {
opacity: 1;
}
#media screen and (max-width: 1200px) {
.custom-cursor {
display: none !important;
}
}
.center {
padding: 30vh;
text-align: center;
width: 100%;
position: relative;
z-index: 9999;
}
.content {
padding: 1em;
font-family: sans-serif;
font-size: 3em;
background: #000;
min-height: 100vh;
}
.content::before {
position: fixed;
background: #ff0;
mix-blend-mode: multiply;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
pointer-events: none;
}
.img-wrapper {
max-width: 450px;
padding: 100px 0;
}
.img {
position: relative;
z-index: 1000;
}
</style>
</head>
<body>
<div class="content">
<div class="custom-cursor" data-custom-cursor="" style="transform: matrix(1, 0, 0, 1, 1128, 590);">
<div class="cursor" style="top: 596px; left: 1118px;"></div>
</div>
<h1>hello world</h1>
link 0 / link 1 /
link 2 / link 3 /
link 4 / link 5 /
link 6 / link 7 /
link 8 .
</div>
<script>
const cursor = document.querySelector(".cursor");
document.addEventListener("mousemove", (e) => {
cursor.setAttribute(
"style",
"top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
);
});
var $c = $("[data-custom-cursor]");
var $h = $("a, button");
var $i = $("img");
$(window).on("mousemove", function (e) {
x = e.clientX;
y = e.clientY;
console.log(x, y);
$c.css("transform", "matrix(1, 0, 0, 1, " + x + "," + y + ")");
});
$h.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active");
});
$h.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active");
});
$i.on("mouseenter", function (e) {
$c.addClass("custom-cursor-active-img");
});
$i.on("mouseleave", function (e) {
$c.removeClass("custom-cursor-active-img");
});
//# sourceURL=pen.js
</script>
</body></html>
Note: run the snippet and select full screen mode
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 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>
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/