I have so far create a page that when scrolling down and a container div is reached, a number of divs within it begin to scroll horizontally along the page. My problem is that I want the page to stop scrolling vertically until all the divs have scrolled all the way along to the left then for the page to begin scrolling vertically again. Essentially, the user scrolls down to the container, horizontal scrolling of the divs are triggered, once across the page, begin scrolling down again. This is what I have so far:
Code:
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
$(window).scroll(function() {
$("#service1, #service2, #service3").css({
"left": windowWidth - $(window).scrollTop()
});
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope I have been clear.
You can use DOMMouseScroll event for check the scroll and block this with detect and replace event. Please try below. I have block vertical scroll when scroll arrive in third section and reactive when is arrive a size defined left. You can modify with what you want.
$(document).ready(function() {
var windowWidth = $(window).width();
$("#service1, #service2, #service3").css({
"left": windowWidth
});
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$(document).scrollLeft($(document).scrollLeft()-(delta*40));
$("body").scrollLeft($(document).scrollLeft()-(delta*40));
e.preventDefault();
}
$('html').on ('DOMMouseScroll', function (e) {
var sens = e.originalEvent.detail;
var lastDivTop = ($(window).scrollTop() - $("#services").offset().top)
var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left)
if (sens < 0) { //scroll Up
if(lastDivLeft > 0 && lastDivTop < 100 ){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
} else if (sens > 0) { //scroll down
if(lastDivTop > 0 && lastDivLeft < 1500){
scrollHorizontally(e)
$(window).scrollTop($("#services").offset().top)
}
}
});
});
#hero {
background-color: rgba(0, 0, 0, 0.5);
height: 900px;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#about {
background-color: rgba(0, 0, 0, 0);
height: 900px;
width: 100%;
}
#services {
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 900px;
margin-bottom: 900px;
width: 100%;
}
#service1 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
position: absolute;
width: 1200px;
}
#service2 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 1300px;
position: absolute;
width: 1200px;
}
#service3 {
background-color: white;
box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
;
height: 700px;
margin-left: 2600px;
position: absolute;
width: 1200px;
}
<div id="hero"></div>
<div id="about"></div>
<div id="services">
<div id="service1"></div>
<div id="service2"></div>
<div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Related
Created a javascript clock but it's not functioning The css styled it correctly, but it's not actually telling the time. Tips and suggestions would be very much appreciated, thanks! If you can, please explain what I did wrong when you answer.. ^-^
All the code is on codepen, linked below
https://codepen.io/codinchopin2117/pen/vYKRNBp
Here's the code
/
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Clock</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
})
</script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #9B0C43;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
border: 4px solid #000;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr
{
width: 160px;
height: 160px;
}
.clock .min, .mn{
width: 190px;
height: 190px;
}
.clock .sec, .sc{
width: 230px;
height: 230px;
}
.hr, .mn, .sc
{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #FFF;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #F7F0D6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #F7F0D6;
z-index: 12;
border-radius: 6px 6px 0 0;
}
The problem here is is that your using the ${} wrong as you have to place them and your string inside of `` instead of '' or "". All you should have to do is replace
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
with
hr.style.transform = `rotatez(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotatez(${mm}deg)`;
sc.style.transform = `rotatez(${ss}deg)`;
you should do
hr.style.transform = `rotate(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotate(${mm}deg)`;
sc.style.transform = `rotate(${ss}'deg')`;
so first the function or whatever you call ${} can only be used within backticks
`` not '' or "" third no need for the + between the value and the deg
also i would use rotate not rotatez and even if you use rotateZ its Z not z but thats a good pratice issue and will not break you code
I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>
You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:
I've been looking a solution for this but I couldn't get it to work.
I would like my page header to change from a transparent background to a red background as the user begins scrolling the page.
$(window).on("scroll", function() {
if($(window).scrollTop() > 800) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
* {margin:0;padding:0}
html {
background: lightgray;
height: 5000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 1s ease-in-out;
height: auto;
background-color: rgba(17, 42, 107, 0.7);
text-align: center;
line-height: 40px;
}
.header.active {
background: red;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">the header</div>
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 10) {
$(".header").addClass("active");
} else {
$(".header").removeClass("active");
}
});
I need rounded unblur image effect by mouse hover on Image.
Like:
enter link description here (background)
Angular solution would be perfect, but jQuery or native JS is ok too. Any ideas ?
I've found solution below, but it is not work in some browsers (( In IE 11 image is not blurred.
$("body").on("mousemove", function(event) {
$("#blurarea").css({
top: event.clientY - 75,
left: event.clientX - 75
});
});
html, body { height: 100%; }
body { -webkit-transform: translate3D(0,0, 1px); }
.softarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
-webkit-filter: blur(8px);
filter: grayscale(0.5) blur(10px);
/*firefox only*/
filter:url(#example);
}
.blurarea {
width: 150px;
height: 150px;
border: 1px solid #fff;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
background-attachment: fixed;
border-radius: 50%;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<div id="softarea" class="softarea"></div>
<div id="blurarea" class="blurarea"></div>
<svg:svg>
<svg:filter id="example">
<svg:feGaussianBlur stdDeviation="2"/>
</svg:filter>
</svg:svg>
</body>
</html>
I'm trying to implement this example locally:
The first is to import:
jquery library and turnjs.
Turn JS
HTML:
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/07.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/08.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/09.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/10.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/11.jpg)"></div>
<div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/12.jpg)"></div>
</div>
JavaScript: It seems the error is here, but I have little experience in JavaScript. I do not understand why this happens.
window.addEventListener('resize', resize);
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
// e.stopPropagation();
});
function loadApp() {
console.log('Load App');
var size = getSize();
console.log(size);
// Create the flipbook
$('.flipbook').turn({
// Width
width: size.width,
// Height
height: size.height,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
function getSize() {
console.log('get size');
var width = document.body.clientWidth;
var height = document.body.clientHeight;
return {
width: width,
height: height
}
}
function resize() {
console.log('resize event triggered');
var size = getSize();
console.log(size);
if (size.width > size.height) { // landscape
$('.flipbook').turn('display', 'double');
}
else {
$('.flipbook').turn('display', 'single');
}
$('.flipbook').turn('size', size.width, size.height);
}
// Load App
loadApp();
CSS:
html,
body {
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
body {
overflow: hidden;
background-color: #fcfcfc;
margin: 0;
padding: 0;
}
.flipbook-viewport {
overflow: hidden;
width: 100%;
height: 100%;
}
.flipbook-viewport .container {
position: absolute;
top: 0;
left: 0;
margin: auto;
}
.flipbook-viewport .flipbook {
width: 922px;
height: 600px;
}
.flipbook-viewport .page {
width: 461px;
height: 600px;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.flipbook .page {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.flipbook-viewport .page img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
.flipbook-viewport .shadow {
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow: 0 0 20px #ccc;
-moz-box-shadow: 0 0 20px #ccc;
-o-box-shadow: 0 0 20px #ccc;
-ms-box-shadow: 0 0 20px #ccc;
box-shadow: 0 0 20px #ccc;
}
but not working.
This is console logs:
what should I do?
Thanks!
The problem is (as you can see in the console error) that the document.body is null.. That's because Dom (html structure) is not fully loaded, AKA ready..
Wrap your code in jQuery ready handler..
jQuery(document).ready(function() {......});
Note that this is better than `window load' as suggested in comments because this doesn't wait for every image to be fully loaded to execute.