I'm trying to display a canvas, specifically a Granim.js canvas, between a Div background image and the other contents of the Div.
So, there would be a background image, then the Granim.js canvas with the opacity turned down on top of that and then text, gallery, button etc. on top of that.
Here is the code for the Div I'm working with:
<section class="bg-image" id="portfolio">
<div class="container-fluid">
<div class="row no-gutter">
<div class="container" id="carousel">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Portfolio</h2>
<hr class="light">
<p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>
<!-- Carousel Card -->
<div class="card card-raised card-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/gallery/bg2.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>UI/UX Design for Web & Mobile</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg3.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Online Advertising</h4>
</div>
</div>
<div class="item">
<img src="img/gallery/bg4.jpeg" alt="Awesome Image">
<div class="carousel-caption">
<h4>Corporate Identity & Branding</h4>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</div>
</div>
</div>
<!-- End Carousel Card -->
<hr class="invis">
Visit Portfolio
</div>
</div>
</div>
</div>
</div>
</section>
CSS for div with bg image:
.bg-image {
color: #fff;
background-image: url(../img/portfolio_bg2.jpg);
background-position: center;
}
and here is the code to add the canvas:
<canvas id="granim-canvas"></canvas>
The canvas does work in isolation elsewhere on the page so there's no problem there. It's just layering things the way I want to that's the issue.
Here's the code for the Granim.js canvas just in case it helps:
## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>
<!-- Call the script -->
<script src="granim.min.js"></script>
<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [0.7, 0.7],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
Related
I'm trying to stop my carousel to auto slide for mobile devices only. I tried to change the data-interval thru js but it's not working for some reason. Any idea how to do it?
Here is my html code for the carousel:
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="img/hero-slide-2.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-3.jpg" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="img/hero-slide-4d.jpg" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
Try first to remove data-ride="carousel" from html, and then use some custom width that you are happy to disable slider for, something like this: (custom BP var is breakpoint)
// set breakpoint width
var BP = 900;
// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });
// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
if( window.innerWidth < BP ){
$('.carousel').carousel({ interval: false });
} else {
$('.carousel').carousel({ interval: 5000 });
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
<li data-target="#x-corp-carousel" data-slide-to="1"></li>
<li data-target="#x-corp-carousel" data-slide-to="2"></li>
<li data-target="#x-corp-carousel" data-slide-to="3"></li>
<li data-target="#x-corp-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner index-only" role="listbox">
<div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!--<div class="carousel-caption">
<h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
<div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="...">
<!-- <div class="carousel-caption">
<h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
</div>-->
</div>
</div>
<!-- Controls -->
</div>
<!-- #x-corp-carousel-->
I have Bootstrap Carousel as shown below
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="1"></li>
<li data-target="#bootstrap-touch-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<!-- Third Slide -->
<div class="item active">
<!-- Slide Background -->
<img src="image/slide1.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p>
select one
select two
</div>
</div>
</div>
</div>
<!-- End of Slide -->
<!-- Second Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide2.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated flipInX">Bootstrap touch slider</h1>
<p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
<!-- Third Slide -->
<div class="item">
<!-- Slide Background -->
<img src="image/slide3.jpeg" alt="Bootstrap Touch Slider" class="slide-image"/>
<div class="bs-slider-overlay"></div>
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Beautiful Animations</h1>
<p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p>
select one
select two
</div>
</div>
<!-- End of Slide -->
</div><!-- End of Wrapper For Slides -->
<!-- Right Control -->
<a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Left Control -->
<a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- slider -->
It works fine as it is but when I remove last item and data target its own
the carousel-control dose not work. What could be the issue here, any help please? Thanks....
i am trying to add a slider to my site. I got it from this site : https://bootsnipp.com/snippets/K3Al3 .
I add HTML codes , CSS codes and Javascript codes but slider doesn't work.
Anyone have a idea?
These are the codes :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="first-slider">
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- Item 1 -->
<div class="item active slide1">
<div class="row"><div class="container">
<div class="col-md-3 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/pfmmo6qj1/window_domain.png">
</div>
<div class="col-md-9 text-left">
<h3 data-animation="animated bounceInDown">Add images, or even your logo!</h3>
<h4 data-animation="animated bounceInUp">Easily use stunning effects</h4>
</div>
</div></div>
</div>
<!-- Item 2 -->
<div class="item slide2">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown"> 50 animation options A beautiful</h3>
<h4 data-animation="animated bounceInUp">Create beautiful slideshows </h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/sp11uneml/rack_server_unlock.png">
</div>
</div></div>
</div>
<!-- Item 3 -->
<div class="item slide3">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">Simple Bootstrap Carousel</h3>
<h4 data-animation="animated bounceInUp">Bootstrap Image Carousel Slider with Animate.css</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
</div>
</div></div>
</div>
<!-- Item 4 -->
<div class="item slide4">
<div class="row"><div class="container">
<div class="col-md-7 text-left">
<h3 data-animation="animated bounceInDown">We are creative</h3>
<h4 data-animation="animated bounceInUp">Get start your next awesome project</h4>
</div>
<div class="col-md-5 text-right">
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
</div>
</div></div>
</div>
<!-- End Item 4 -->
</div>
<!-- End Wrapper for slides-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
</a>
</div>
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#next'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
$('#carousel-example-generic').carousel({
interval:3000,
pause: "false"
});
})(jQuery);
I Think jQuery is Missing in your Code. You May Include any jQuery Library before your script. Use the Below CDN Library and Bootstrap Library.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Use these headers
<!-- headers for https://bootsnipp.com --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css"><script src="https:////code.jquery.com/jquery-1.11.0.min.js"></script><script src="https:////netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"</script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have index.html with anchors which i want to navigate to different items in houses.html. houses.html has full page carousel slider with 5 items ill paste only 2 of them.So to be clear inside index.html i have anchors which navigate to houses.html like this :
<li><a id="houses-slide-1" >Stark</a></li>
<li><a id="houses-slide-2" >Lannister</a></li>
and jquery for the anchors :
$('#houses-slide-1').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
$('#houses-slide-2').click(function(){
/*do something here maybe?*/
window.location.href = 'sl/houses.html';
});
houses.html HTML :
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner" id="slide-one-1">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/ned.jpg');">
<div class="row">
<div class="col-md-5 col-md-offset-2 col-sm-5 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Starks</h2>
</div>
</div>
<div class="item" id="slide-two-2">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('img/cersei.jpg');">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 slide-paneli">
<div class="col-md-12 slide-paneli">
<a class="remove-session" href="../index.html"> <img class="back-img" src="img/back.png" alt="back button"></a>
</div>
<h1>...</h1>
<p>...</p>
<div class="row">
</div>
</div>
</div>
</div>
<div class="carousel-caption">
<h2>Lannister</h2>
</div>
</div>
Change your jQuery to “load” the new page at the ID you want:
$('#houses-slide-1').click(function() {
window.location.href = 'sl/houses.html#slide-one-1';
});
$('#houses-slide-2').click(function() {
window.location.href = 'sl/houses.html#slide-two-2';
});
Of course this is a terrible solution. You will have to update every click handler every time you change the ID of the slides.
First, sorry about my english.
I want to do a slider with transitions like this http://pumamaritimeservices.com/beta/ but with bootstrap, i did before a carousel but i don't know if i can do transitions like the first link.
My new slider is the next: http://pumamaritimeservices.com/beta3/
My code is:
<div style="height: 90%;" id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/01.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/01_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B9A004; padding: 5px 15px;">Cargo Surveys</span><br /><br /><span style="background-color: #B9A004; padding: 5px 15px; font-size: 20px">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/02.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/02_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #012540; padding: 5px 15px;">Containers and Cargo in Containers Surveys</span><br /><br /><span style="background-color: #012540; padding: 5px 15px; font-size: 20px;">LEARN MORE</span></h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill hidden-xs" style="background-image:url('img/slider/03.jpg');"></div>
<div class="fill show-xs" style="background-image:url('img/slider/03_corta.jpg');"></div>
<div class="carousel-caption">
<h2 class="pull-left"><span style="background-color: #B81818; padding: 5px 15px;">More than 680 Lloyd’s Agents around the world</span></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Can I do any transition in my existing slider? I really need help with this, i don't want the tipical fade in and fade out, i want enter the image at the left and the text too, and it out at right
you can find more examples and tutorial from this links.
tutorialrepublic
and
mobirise