I am interested in developing an interactive full-page slider that moves vertically instead of scrolling. This project would allow users to slide between page divs using the mousewheel.
I am pursuing this idea as I am eager to delve deeper into matrix operations and enhance my knowledge of optimizing animations/transitions.
» » Check out this awesome example! « «
Solution
After 22 hours of work and receiving valuable feedback from the community, I have made significant progress.
I want to express my gratitude to the following individuals on Stack Overflow:
Here is the updated code:
// Modified jQuery Code
$(document).ready(function() {
// --- VARIABLES
var fullAnimation = false;
var currentSlide = 0;
var lastSlide = $('.page').length - 1;
var scrollDirection = "";
// --- FUNCTIONS
function slidePage(scrollDirection, currentSlide) {
fullAnimation = false;
if(scrollDirection == "down") {
$('.current-slide-animating').toggleClass('current-slide-animating prev-slide');
$('.page').eq(currentSlide - 1).addClass('prev-slide');
if(currentSlide != lastSlide) {
$('.page').eq(currentSlide + 1).addClass('next-slide');
}
} else {
$('.current-slide-animating').toggleClass('current-slide-animating next-slide');
$('.page').eq(currentSlide + 1).addClass('next-slide');
if(currentSlide != 0) {
$('.page').eq(currentSlide - 1).addClass('prev-slide');
}
}
}
// --- EVENTS
$(window).bind('mousewheel', function(event) {
scrollDirection = event.originalEvent.wheelDelta > 0 ? "up" : "down";
if(fullAnimation == false) {
// if scroll down
if(currentSlide != lastSlide && scrollDirection == "down") {
fullAnimation = true;
currentSlide += 1;
$('.current-slide').toggleClass('current-slide current-slide-animating')
$('.next-slide').toggleClass('next-slide current-slide');
$('.page.prev-slide').removeClass('prev-slide');
$('.page.next-slide').removeClass('next-slide');
setTimeout(function() {
slidePage(scrollDirection, currentSlide)
}, 600);
}
// if scroll up
if(currentSlide != 0 && scrollDirection == "up") {
fullAnimation = true;
currentSlide -= 1;
$('.current-slide').toggleClass('current-slide current-slide-animating')
$('.prev-slide').toggleClass('prev-slide current-slide');
$('.page.prev-slide').removeClass('prev-slide');
$('.page.next-slide').removeClass('next-slide');
setTimeout(function() {
slidePage(scrollDirection, currentSlide)
}, 600);
}
}
});
});/* Updated CSS Styles */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300italic,300,400,400italic,500);
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
-webkit-user-drag: none;
-webkit-tap-highlight-color: transparent;
}
html {
background-color: #FFF;
height: 100%;
width: 100%;
font-size: 1.125em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #333;
color: #333;
fill: currentColor;
height: 100%;
width: 100%;
max-height: 100vh;
min-width: 16.666667em;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-style: normal;
letter-spacing: 1px;
line-height: 1.65em;
}
main {
display: table;
width: 100%;
padding-bottom: 33px;
padding-top: 20px;
}
.main, .page {
width: 100%;
height: 100%;
}
.main {
overflow: hidden;
}
.page {
position: absolute;
opacity: 0;
overflow: auto;
}
.page.current-slide {
opacity: 1;
z-index: 2;
-webkit-transform: translateY(0);
transform: translateY(0);
transition:
opacity 350ms cubic-bezier(.4, 0, .2, 1),
-webkit-transform 600ms cubic-bezier(.4, 0, .2, 1),
transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.page.current-slide-animating {
opacity: 0;
z-index: 1;
-webkit-transform: scale(.9);
transform: scale(.9);
transition:
opacity 350ms cubic-bezier(.4, 0, .2, 1) 100ms,
-webkit-transform 500ms cubic-bezier(.4, 0, .2, 1),
transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.page.prev-slide,
.page.next-slide {
opacity: 1;
z-index: 2;
}
.page.prev-slide {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.page.next-slide {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.page.one {
background-color: #4bffc5;
}
.page.two {
background-color: #a497ff;
}
.page.three {
background-color: #ff5152;
}
.page.four {
background-color: #3d98ff;
}<!-- HTML Markup -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="page one current-slide"></div>
<div class="page two next-slide"></div>
<div class="page three"></div>
<div class="page four"></div>
</div>
</body>For a better viewing experience, click on the full page option.
Here is a snippet of code I created: <?php $steamData = file_get_contents("http://steamcommunity.com/profiles/76561198258195397/inventory/json/730/2"); $data = json_decode($steamData, true); $items = $data['rgDescriptions']; foreach($items as ...
Within my Node.js application, I utilize bootstrap-sass in conjunction with Compass. Omitting the use of gulp-compass and related tasks, specifically relying on Compass itself, I have placed the Compass config.rb file in the root directory of my app. To co ...
I have implemented a contact form on my website using ajax/php/jquery. The form includes checkboxes named 'selection[]' that I am struggling to get the values of and include in the email text. Currently, when I use an implode statement, the che ...
I stumbled upon a colorbox tutorial and attempted to replicate it with a POST action, but unfortunately, it just continues to load. Check out this fiddle The button represents the problematic POST action, while the text link is the original example that ...
Struggling to understand how an absolutely positioned :before element works. I need a large quote mark to be placed behind a testimonial. I opted for a :before element because it is a font, making it scalable for retina displays and saving an extra HTTP re ...
So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...
I'm currently working on an html page that includes a single audio player within an iframe. I am trying to implement autoplay functionality for both desktop and mobile devices. The specific player being used is displayed below: <div style="wi ...
Just starting out with programming and currently working on a new web application using Meteor and AngularJS. I would like to incorporate the elements/css from 'Zurb Foundation For Apps' into my project... I am familiar with including Bootstrap ...
I am currently working with MaterializeCSS and I have a question about adding an image within the "collapsible-body" section of a Collapsible element. I've tried to add it but unfortunately, it doesn't seem to display. Is there a way to achieve t ...
One thing that puzzles me is the behavior of the display property in CSS. Why is it that setting {display: flex} for a div will apply this style to all nested p elements within the div? It seems like {display: flex} might be an inherited property, but I&ap ...
I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...
Before I delve into the issue I'm facing, I want to emphasize that despite searching for existing solutions, I have not been able to find one that works. This problem has been blocking me for a week now, and I am in desperate need of assistance. The i ...
Currently, I am working with a Kendo UI DateTimePicker that provides the selected date in the following format: Thu Dec 15 2016 23:23:30 GMT-0500 My objective is to pass this date into moment.js for extracting the day information like so: var momentDate ...
Is it possible to have a callback after using location.reload() with JQUERY to refresh the page when a user changes language? Although it refreshes the page, I am wondering if it might be possible to have a callback function as well. I would appreciate a ...
I am trying to implement a custom mail chimp form that pops up upon page load, similar to what Groupon and Fab do. I have the code for the form copied on our server but I'm struggling to create a pop-up effect when the page loads. I have tested shadow ...
Here is my PHP code for executing a query: $host = "localhost"; $user = "root"; $pass = "abc123"; $databaseName = "class"; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $result = mysql_qu ...
As I work on customizing a bootstrap dropdown with checkboxes, my goal is to have the label name written on the input dropdown in between ';' whenever a checkbox from the dropdown is selected. This will create a similar result as shown in the upl ...
When a Twitter Bootstrap dropdown is nested inside a tr element, and the tr element is clickable through ng-click, clicking anywhere on the page will collapse the dropdown menu. This behavior is defined in a directive using $document.bind('click' ...
I have been struggling with creating a responsive side menu in my HTML code. Despite my efforts, the side menu contents, buttons, and layout do not adjust properly when resizing the browser window. When I drag the browser size from bottom to top, the butto ...
I am attempting to achieve the following: var items = $("main a").unique(); var links = []; items.each(function (index, value) { links.push({ href: this.href, text: this.text }); }); The goal is to ...