Slider like Yahoo Weather App
How do I make an slider like yahoo weather app?
What is a slider like yahoo weather app? How do you make a slider like yahoo weather app? This script and codes were developed by Chris Coyier on 04 July 2022, Monday.
Slider like Yahoo Weather App - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider like Yahoo Weather App</title> <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! */ @import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap { width: 300px; height: 500px; margin: 20px auto;
}
.slider { overflow-x: scroll;
}
.holder { width: 300%;
}
.slide { float: left; width: 300px; height: 500px; position: relative; background-position: -100px 0;
}
.temp { position: absolute; color: white; font-size: 100px; bottom: 15px; left: 15px; font-family: 'Josefin Slab', serif; font-weight: 100;
}
#slide-0 { background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 { background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 { background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(transparent, black);
}
.slider-nav { text-align: center; margin: 10px 0 0 0;
}
.slider-nav a { width: 10px; height: 10px; display: inline-block; background: #ddd; overflow: hidden; text-indent: -9999px; border-radius: 50%;
}
.slider-nav a.active { background: #999;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slider-wrap"> <div class="slider" id="slider"> <div class="holder"> <div class="slide" id="slide-0"><span class="temp">74°</span></div> <div class="slide" id="slide-1"><span class="temp">64°</span></div> <div class="slide" id="slide-2"><span class="temp">82°</span></div> </div> </div> <nav class="slider-nav"> <a href="#slide-0" class="active">Slide 0</a> <a href="#slide-1">Slide 1</a> <a href="#slide-2">Slide 2</a> </nav>
</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>
Slider like Yahoo Weather App - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap { width: 300px; height: 500px; margin: 20px auto;
}
.slider { overflow-x: scroll;
}
.holder { width: 300%;
}
.slide { float: left; width: 300px; height: 500px; position: relative; background-position: -100px 0;
}
.temp { position: absolute; color: white; font-size: 100px; bottom: 15px; left: 15px; font-family: 'Josefin Slab', serif; font-weight: 100;
}
#slide-0 { background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 { background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 { background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(transparent, black);
}
.slider-nav { text-align: center; margin: 10px 0 0 0;
}
.slider-nav a { width: 10px; height: 10px; display: inline-block; background: #ddd; overflow: hidden; text-indent: -9999px; border-radius: 50%;
}
.slider-nav a.active { background: #999;
}
Slider like Yahoo Weather App - Script Codes JS Codes
var slider = { // Not sure if keeping element collections like this // together is useful or not. el: { slider: $("#slider"), allSlides: $(".slide"), sliderNav: $(".slider-nav"), allNavButtons: $(".slider-nav > a") }, timing: 800, slideWidth: 300, // could measure this // In this simple example, might just move the // binding here to the init function init: function() { this.bindUIEvents(); }, bindUIEvents: function() { // You can either manually scroll... this.el.slider.on("scroll", function(event) { slider.moveSlidePosition(event); }); // ... or click a thing this.el.sliderNav.on("click", "a", function(event) { slider.handleNavClick(event, this); }); // What would be cool is if it had touch // events where you could swipe but it // also kinda snapped into place. }, moveSlidePosition: function(event) { // Magic Numbers =( this.el.allSlides.css({ "background-position": $(event.target).scrollLeft()/6-100+ "px 0" }); }, handleNavClick: function(event, el) { event.preventDefault(); var position = $(el).attr("href").split("-").pop(); this.el.slider.animate({ scrollLeft: position * this.slideWidth }, this.timing); this.changeActiveNav(el); }, changeActiveNav: function(el) { this.el.allNavButtons.removeClass("active"); $(el).addClass("active"); }
};
slider.init();
// http://codepen.io/BaylorRae/pen/ImGBC
// Originally added click links, so I ported over and re-wrote
Developer | Chris Coyier |
Username | chriscoyier |
Uploaded | July 04, 2022 |
Rating | 4.5 |
Size | 3,489 Kb |
Views | 44,528 |
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 |
Sticky Footer | 2,089 Kb |
Load External Data in React | 2,949 Kb |
Complex Text Shadow Examples | 2,988 Kb |
SVG Filters on HTML5 Video | 2,764 Kb |
Label Pattern with just CSS | 3,617 Kb |
Barberpole Hover Animation | 3,674 Kb |
Pull Quote from NY Post | 4,622 Kb |
Airtable Emoji Poll | 3,194 Kb |
Automatic Table of Contents | 2,869 Kb |
Infinite Slideshow | 1,724 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 |
Scroll using CSS | Casperovic | 2,159 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Hexagons | Ashmind | 4,360 Kb |
Ocean | Gordonnl | 2,817 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!