Gradients on edges of swiper carousel - javascript

I want behavior like the one on this airbnb web page. Specifically, the one in the below image.
As you can see, at the edges of the carousel, it has a fading effect only on slide that are cut off.
This is what I have so far: https://jsfiddle.net/gpu5cafz/.
HTML (make sure to install Swiper if you aren't using the jsfiddle):
<div class="container">
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
</div>
CSS:
.swiper-slide {
width: 300px !important;
height: 200px !important;
text-decoration: none;
background-color: gray;
border-radius: 10px;
color: white;
background: rgb(203, 203, 203);
}
.container {
padding: 60px 120px 60px 120px;
}
JS:
const swiper = new Swiper('.swiper', {
slidesPerView: 'auto',
spaceBetween: 30,
freeMode: true,
freeModeSticky: false,
watchSlidesProgress: true,
watchSlidesVisibility: true,
});

Look into using gradients on the mask property.
For instance,
.container {
mask-image: linear-gradient(to right, transparent 0%, black 20% 80%, transparent 100%);
}

You are correct it was not the exact thing your looking for. Your looking for this type of soluton:
div {
background: linear-gradient(to right, white 20%, grey, white 80%);
color: white;
padding: 30px;
height: 160px;
font-family: sans-serif;
font-size: 1.5em;
}
<div>
Three color stops.
</div>
I think in the end your gonna end up in this ballpark. I am not 100% sure how to get your exact endresult (they seem to use some kind of animation feature too). But maybe someone else can supplement. This example I am giving you here is based on what I built for a customer once where they had an image in the middle and they wanted to have a background color left/right and then have it fade out as it got closer to the middle of the screen.

Related

How can I remove the scroll bar, but still allow scrolling with mouse?

In my site I am using slick carousel, which makes it really simple to create a div that is scrollable with mouse without a visible scrollbar. However, I have a different div, for which I can not use the slick plugin and I am trying to make it so it functions identically to the slick carousel.
Does anyone know if there is a class that slick uses to make a div scrollable with a mouse without a visible scrollbar, that I can add to another div?
For example, this is a div that uses a slick carousel that is scrollable with mouse without a scrollbar
<div class='col-sm-10 carousel1 d-flex align-items-center'>
<div class='content'>
<img src='assets/item1.png'>
</div>
<div class='content'>
<img src='assets/item2.png'>
</div>
<div class='content'>
<img src='assets/item3.png'>
</div>
<div class='content'>
<img src='assets/item4.png'>
</div>
<div class='content'>
<img src='assets/item5.png'>
</div>
<div class='content'>
<img src='assets/item6.png'>
</div>
<div class='content'>
<img src='assets/item7.png'>
</div>
</div>
How can I use slick files to add the same functionality to another div, so it can be scrolled with a mouse without the scrollbar?
<div class='container'>
<div class='box'>
</div>
<div class='box'>
</div>
<div class='box'>
</div>
<div class='box'>
</div>
<div class='box'>
</div>
</div>
Another thing that hopefully someone more clever than me can explain: when I go to Chrome Dev tools and I choose the responsive mode with a phone or laptop with touch, it works and scrolls with mouse, however, if I switch back to laptop I have to use the scrollbar again.
Simplest answer is this (just change 'body' for whatever class you want):
body::-webkit-scrollbar {
width:0;
}
And if you want to keep scroll bar visible, you can change the colors like this:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
Now, if you want to keep the scrollbar width as is, but make the scrollbars transparent (which is another trick), just replace the colors above with transparency:
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
body::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
outline: 1px solid rgba(0, 0, 0, 0);
}

How to put one picture on two screens in fullPage.js

I have a project using fullpage.js. And I absolutely do not know how to put one big picture on two screens, so that it does not remain fixed.
Cut the big picture in half and save it as two pictures.
Set the first half as background-image of first section and second one as background-image of last section. You also need to change the background-position to 100% 50% for first and 0 50% for second.
In short:
.first-half {
background: url('/path/to/top-half.png') bottom center no-repeat /cover;
}
.second-half {
background: url('/path/to/bottom-half.png') top center no-repeat /cover;
}
See background shorthand for details.
Here's an example:
var slideTimeout;
$('#fullpage').fullpage({});
#section1{
background:url("https://i.stack.imgur.com/NKI2k.jpg") bottom center /cover;
}
#section2{
background:url("https://i.stack.imgur.com/JXODm.jpg") top center /cover;
}
#fullpage {
color: white;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,.65);
height: 100vh;
font-size: 3em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<header id="header">
</header>
<div id="fullpage">
<div class="section" id="section1">
<div class="centered">
First Section
</div>
</div>
<div class="section" id="section2">
<div class="centered">
Second Section
</div>
</div>
</div>

JQuery SlideUp - Background Color Behind Image

I am using JQuery slideUp/slideDown to add an overlay to an image that is hidden until mouseover and then slides up from the bottom of the image.
The div that is sliding up is given a background color, but it doesn't show up over the image, it shows up behind it (the text shows up on top of the image, but I can just see the bottom edge of the div's background color because of the margins I set). Z-index is already set to 100.
Any ideas? Thanks!
(function($) {
$(document).ready(function() {
$(".slider").attr("style", "display: none;");
if ($(".slider")) {
$('.image').mouseover(function() {
$(this).find(".slider").slideDown("400");
}).mouseout(function() {
$(this).find(".slider").slideUp("400");
});
}
});
}(jQuery));
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333 !important;
background: #333333 !important;
background-position: 0% 100%;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
z-index: 100 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
It's better to define display: none; for slider in css rule.
Also to bind mouseenter and mouseleave to container will prevent jumping slider when mouse is leaving image and moving over slider.
$('.container').on("mouseenter", function() {
$(".slider").slideDown();
});
$('.container').on("mouseleave", function() {
$(".slider").slideUp("400");
});
.container {
width: 300px;
}
.image{
height: 300px;
width: 300px;
background: #000000;
}
.slider {
background-color: #333333;
color: #ffffff;
margin: -90px 0 0 0;
height: 90px;
width: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
</div>
<div class="slider">
<div class="title">Title</div>
<div class="text">Text</div>
</div>
</div>
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
If you do not define position, element will be static, as that's default position for block elements.
M.

sliding divs with text navigation

It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>

Overlay particles.js on fullscreen div

I am using the following .js plugin:
https://github.com/VincentGarreau/particles.js/
With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <div id="particles-js"></div> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.
Here is my HTML:
<div id="particles-js">
<div class="jumbotron">
<div class="container center-vertically">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h1>
A template with a bit of a different <strong>look & feel</strong>.
</h1>
<hr>
<p>Particles is a fun and multipurpose template, with clean & modern design <i>+</i> code.</p>
</div>
</div>
</div>
</div>
And the CSS for the jumbotron as well as the particles-js ID:
.jumbotron {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
padding-top: 79px;
padding-bottom: 0;
display: table;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background: #6819e8; /* Old browsers */
background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */
}
.center-vertically {
display: table-cell;
text-align: center;
vertical-align: middle;
}
I have also uploaded a live version so it is easier to view the problem:
http://aliensix.com/company/
I think what you need to do is make your #particles-js child of .jumbotron.
#particles-js needs to be positioned absolutely relative to the .jumbotron.
HTML
<div class="jumbotron">
<div id="particles-js"></div>
</div>
CSS
.jumbotron {
position: relative;
// Other style rules ...
}

Categories