A Pen by Altitude
How do I make an a pen by altitude?
What is a a pen by altitude? How do you make a a pen by altitude? This script and codes were developed by Altitude on 23 September 2022, Friday.
A Pen by Altitude - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Altitude</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #304040; padding: 2em; color: #fff;
}
h2 { color: #fff; position: relative; margin: 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
p { margin: 0 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
small { display: block; color: #fff; background: #d66; padding: .5em 1em; font-size: .5em; position: absolute; right: 0; top: 0; border-radius: 1em;
}
.bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.chrome { border-radius: .25em; background: #ccc; padding: 2em .5em .5em .5em; width: 300px; height: 200px; resize: both; overflow: auto; position: relative;
}
.chrome:after { display: block; content: ''; width: 1em; height: 1em; background: #fff; position: absolute; top: .5em; right: .5em; border-radius: 1em;
}
.chrome:before { display: block; content: 'http://browserframe/slideshow'; position: absolute; left: .5rem; top: .5rem; height: 1rem; font-size: .6em; background: #fff; padding: 0 .5rem; line-height: 1rem; width: 80%; border-radius: .5rem; color: #777;
}
.slideshow { z-index: 0; position: relative; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.slideshow .slide { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-repeat: no-repeat; background-position: center center; background-size: cover;
}
.slide { z-index: 1; opacity: 0; transition: opacity .5s linear .5s; -webkit-backface-visibility: hidden;
}
.slide.active { z-index: 10; opacity: 1; transition: opacity .5s ease-in-out 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2> Responsive Slider Experiment<small>work in progress</small>
</h2>
<P>Try resizing the 'browser' to see the slide background adjust. Only tested on chrome.</P>
<div class="chrome"> <div class="slideshow"> <div class="slide" data-src="http://placehold.it/1024x768/399/fff&text=bg+one"></div> <div class="slide" data-src="http://placehold.it/1024x768/933/fff&text=bg+two"></div> <div class="slide" data-src="http://placehold.it/1024x768/d93/fff&text=bg+three"></div> </div>
</div>
<div class="bg"> <div class="slideshow"> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/1"></div> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/3"></div> <div class="slide" data-src="http://placeimg.com/480/320/people/grayscale/4"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Altitude - Script Codes CSS Codes
body { background-color: #304040; padding: 2em; color: #fff;
}
h2 { color: #fff; position: relative; margin: 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
p { margin: 0 0 0 1rem 0; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
small { display: block; color: #fff; background: #d66; padding: .5em 1em; font-size: .5em; position: absolute; right: 0; top: 0; border-radius: 1em;
}
.bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.chrome { border-radius: .25em; background: #ccc; padding: 2em .5em .5em .5em; width: 300px; height: 200px; resize: both; overflow: auto; position: relative;
}
.chrome:after { display: block; content: ''; width: 1em; height: 1em; background: #fff; position: absolute; top: .5em; right: .5em; border-radius: 1em;
}
.chrome:before { display: block; content: 'http://browserframe/slideshow'; position: absolute; left: .5rem; top: .5rem; height: 1rem; font-size: .6em; background: #fff; padding: 0 .5rem; line-height: 1rem; width: 80%; border-radius: .5rem; color: #777;
}
.slideshow { z-index: 0; position: relative; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
.slideshow .slide { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-repeat: no-repeat; background-position: center center; background-size: cover;
}
.slide { z-index: 1; opacity: 0; transition: opacity .5s linear .5s; -webkit-backface-visibility: hidden;
}
.slide.active { z-index: 10; opacity: 1; transition: opacity .5s ease-in-out 0;
}
A Pen by Altitude - Script Codes JS Codes
// Whirl : Very basic JQuery/Zepto plugin, as simple as it gets. Just adds and removes acrive class. Relies on CSS3 for transitions
;(function (defaults, $, window, document, undefined) { 'use strict'; $.extend({ // Function to change the default properties of the plugin // Usage: // jQuery.whirlSetup({property:'Custom value'}); whirlSetup: function (options) { return $.extend(defaults, options); } }).fn.extend({ // Usage: // jQuery(selector).whirl({property:'value'}); whirl: function (options) { defaults = { activeSlideClass: 'active', // Class name for active slide delay: 3000, // Delay betwwen transitions autoPlay: true // Enables/disables autoplay on load }; options = $.extend({}, defaults, options); return $(this).each(function () { var $element, $slides, currentIndex, interval; $element = $(this); $slides = $element.children(); $slides.each(function () { // Assign background image to each slide from data-src attr $(this).css({ 'background-image': 'url(' + $(this).attr('data-src') + ')' }); }); // Go to slide at index (with boundary wraping) and mark it as new active slide (trigger CSS3 transition) var goToSlide = function (index) { if ($slides.length > 0) { if (index < 0) index = $slides.length - 1; if (index > $slides.length - 1) index = 0; var $previousSlide = $slides.filter('.' + options.activeSlideClass); $previousSlide.removeClass(options.activeSlideClass); var $nextSlide = $slides.eq(index); $nextSlide.addClass(options.activeSlideClass); currentIndex = index; } }; // Previous and next slide functions var next = function () { goToSlide(currentIndex + 1); }; var previous = function () { goToSlide(currentIndex - 1); }; // play/pause functions var play = function () { interval = window.setInterval(function () { next(); }, options.delay); }; var pause = function () { window.clearInterval(interval); }; // Activate first slide goToSlide(0); // Autoplay if (options.autoPlay) { play(); } }); } });
})({ property: "value", otherProperty: "value"
}, jQuery, window, document);
// Calling the plugin
$(function () { $('.slideshow').whirl();
});
Developer | Altitude |
Username | altitudems |
Uploaded | September 23, 2022 |
Rating | 3 |
Size | 4,928 Kb |
Views | 20,240 |
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!
Name | Size |
Pricing Table v2 | 3,175 Kb |
Expanding Breadcrumb Nav | 2,865 Kb |
Custom Social Feeds | 3,750 Kb |
Jquery Tab Plugin | 5,471 Kb |
Semantic Tableless Calendar | 4,528 Kb |
VueJS Calendar Component | 8,913 Kb |
Responsive, Fullscreen Slider | 5,472 Kb |
VueJS Audio Mixer | 10,100 Kb |
Simple CSS Ribbon and Banner | 3,871 Kb |
CSS3 Buttons Flat | 5,065 Kb |
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!
Name | Username | Size |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Contact | GanNichiHa | 2,514 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!