Slide windows

Developer
Jonathan De Montalembert
Size
8,187 Kb
Views
48,576
  1. Slide windows Previews
  2. Slide windows HTML Codes
  3. Slide windows CSS Codes
  4. Slide windows JS Codes

How do I make an slide windows?

Navigation with unique windows, slide effect. Support mousewheel scrolling. What is a slide windows? How do you make a slide windows? This script and codes were developed by Jonathan De Montalembert on 10 July 2022, Sunday.

Slide windows Previews
IQ Test

Slide windows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide windows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='content'> <div> <span class='delayed noise'> Home </span> </div> <div> <span class='delayed noise'> Desk </span> </div> <div> <span class='noise'> Garden </span> </div> <div> <span class='noise'> Cellar </span> </div>
</div>
<nav class='noise'> <ul> <li>Home</li> <li>Desk</li> <li>Garden</li> <li>Cellar</li> </ul>
</nav>
<section class='search'>
<input type='search' placeholder='Search &#10551;' list="keywords">
<datalist id='keywords'> <option value='Home'> <option value='Desk'> <option value='Garden'> <option value='Cellar'>
</datalist>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide windows - Script Codes CSS Codes

body,
html { height: 100%; overflow: hidden; position: relative; padding: 0; margin: 0;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.content { min-height: 100%; position: relative; height: 100%; display: block; color: silver; font-size: 24px; text-align: center; -moz-transition: bottom 800ms ease; -webkit-transition: bottom 800ms ease; transition: bottom 800ms ease;
}
.noise { background-image: url(data:image/png;base64,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);
}
.content div { position: relative; height: 100%; bottom: 0; padding: 20px 0px;
}
.content div:nth-child(1) { background-color: tomato;
}
.content div:nth-child(2) { background-color: lavender;
}
.content div:nth-child(3) { background-color: #BADA55;
}
.content div:nth-child(4) { background-color: antiqueWhite;
}
.content div span { background-color: teal; border-radius: 5px; padding: 5px 20px; margin: 10px auto; display: block; width: 50%; color: #144949; position: relative; z-index: 1; text-align: left; font-weight: 700; font-size: 32px; text-shadow: 0 1px rgba(255, 255, 255, 0.2), 0 -1px rgba(0, 0, 0, 0); box-shadow: 0 8px 5px -6px rgba(0, 0, 0, 0.5);
}
.content div span:first-letter { padding: 0 5px; margin: 0 2px; color: teal; border-radius: 3px; background: #144949; box-shadow: 0 1px rgba(255, 255, 255, 0.3), 0 2px rgba(0, 0, 0, 0) inset; text-shadow: 0 -1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0);
}
.content div:not(.current) .delayed { opacity: 0; -webkit-transform: translateX(-1000px) translateY(200px); -webkit-transition: all 1s ease;
}
.content div.current .delayed { opacity: 1; -webkit-transform: translateX(0px) translateY(0px); -webkit-transition: all 1s ease;
}
nav { text-align: center; color: silver; font-size: 20px; position: fixed; height: 100%; min-width: 10%; width: 150px; background-color: rgba(100, 100, 100, 0.9); left: 0; top: 0; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); margin: 80px 20px; border-radius: 15px 15px 0 0; z-index: 1;
}
nav:hover { background-color: #646464;
}
nav ul { margin: 25px 0; padding: 0;
}
nav ul li { list-style: none; cursor: pointer; padding: 5px 0;
}
nav ul li:hover,
nav ul li.current { background: rgba(0, 0, 0, 0.2); cursor: pointer;
}
input[type=search] { -webkit-appearance: none; position: absolute; top: 30px; left: 30px; border: 1px solid transparent; border-radius: 5px; padding: 5px; width: 6%; min-width: 90px; background: transparent; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; transition: all 400ms ease; border-radius: 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.5); font-size: 14px;
}
input[type=search]:focus { border: 1px solid silver; background: white; outline: none; max-width: 200px; width: 20%; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; transition: all 400ms ease; box-shadow: inset 0 8px 5px -5px rgba(0, 0, 0, 0.5), 0 1px rgba(255, 255, 255, 0.35); border-radius: 3px;
}
::-webkit-input-placeholder { color: brown; font-weight: 700;
}
input:focus::-webkit-input-placeholder { color: silver;
}
:-moz-placeholder { color: white;
}

Slide windows - Script Codes JS Codes

// make it more dry
// swipe control
// arrow control
(function ($, window, undefined) { var switchCurrent = function(that, newEl){ // remove all the class current $('.current').removeClass('current'); $(that).addClass('current'); $('.content div').eq(newEl).addClass('current'); }; var height = $('body').height(), width = $('body').width(), $sliderContainer = $('.content'), $slideContainer = $('div'), $nav = $('nav'), $list = $('li'), current = 'current', // to keep a live nodeList, jQuery object is static elCurrent = document.getElementsByClassName(current), timeBetweenScroll = 800; // set the class current to the first if(!$sliderContainer.find(elCurrent).length) { $sliderContainer.find($slideContainer).eq(0).addClass(current); } if(!$nav.find(elCurrent).length) { $nav.find($list).eq(0).addClass(current); } // Click event $('nav').on('click', 'li', function () { var indexNew = $(this).index(); // switch the current switchCurrent(this, indexNew); // move to the current slide $sliderContainer.css('bottom',indexNew*height); }); // mousewheel event var mousewheel = function(){ $(window).on('mousewheel', function(e, delta){ var dir = delta > 0 ? 'UP' : 'DOWN', $currentNav = $nav.find(elCurrent), $currentContent = $sliderContainer.find(elCurrent), // bool isLastLi = $nav.find($list).eq(-1).hasClass(current), isFirstLi = $nav.find($list).eq(0).hasClass(current); $(elCurrent).removeClass(current); if(dir == 'UP'){ pos = isFirstLi ? $currentNav.addClass(current) : $currentNav.prev().addClass(current); } else if(dir == 'DOWN'){ pos = isLastLi ? $currentNav.addClass(current) : $currentNav.next().addClass(current); } // move the container $sliderContainer.css({bottom:pos.index()*height}) // add class current to current slide .find($slideContainer).eq(pos.index()).addClass(current); // unbind the mousewheel event to avoid multiple slide at once $(window).off('mousewheel'); //bind mousewheel after a certain time setTimeout(mousewheel, timeBetweenScroll); // avoid propagation and default behavior return false; }); } mousewheel(); // redefine the height and width when resizing $(window).on('resize', function(){ height = $('body').height(); width = $('body').width(); $sliderContainer.css('bottom', $(elCurrent).closest($slideContainer).index()*height) });
}(jQuery, window));
Slide windows - Script Codes
Slide windows - Script Codes
Home Page Home
Developer Jonathan De Montalembert
Username roine
Uploaded July 10, 2022
Rating 3.5
Size 8,187 Kb
Views 48,576
Do you need developer help for Slide windows?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonathan De Montalembert (roine) Script Codes
Name
Picture with css
Alternative text on image not loaded with placehold.it
Demo animation with css for IKON FX
Tooltip in table
A Pen by jonathan de montalembert
A Pen by jonathan de montalembert
Very basic test on firebase
Shadows in css
A simple box with multicolor header
A simple pricing table
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!