How to build text-only fadein/fadeout carousel in JS (Bootstrap-like)? - javascript

I'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>

Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.

Related

Jquery - pagination for images inside div's

I created simple image gallery and I'm looking for script or solution to make pagination for my images inside div's.
At first, it's my code.
CODEPEN.IO
My structure of gallery looks like this:
<div class="container">
<div class="main-gallery">
<div class="a-gallery">
<div class="intem-gallery">
<div class="image-gallery">
IMAGE
</div>
</div>
</div>
</div>
</div>
I found THIS jquery pagination script but it's works on different structure, like this.
<div class="parent">
<div class="child">
IMAGE
</div>
</div>
So can this script handle it with my case or maybe someone have better solution because I need to keep eg. 4 images per site. I would like to have something that will work with my structure.
look at this jQuery Pagination plugin or this one10+ jQuery Pagination Plugins. ist very easy to use. i hope it hepls

Bootstrap with fullpage.js

Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.

Scrollspy for Materialize not scrolling at all with Angularjs

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God

Parallax background effect with ScrollTo and Localscroll

I have looked around for hours trying to figure this out. I have a site built up like this jsfiddle.
<div id="window">
<div id="section-wrapper">
<div id="one" class="section"><p>One</p>
</div>
<div id="two" class="section"><p>Two</p>
</div>
<div id="three" class="section"><p>Three</p>
</div>
<div id="four" class="section"><p>Four</p>
</div>
<div id="five" class="section"><p>Five</p>
</div>
<div id="six" class="section"><p>Six</p>
</div>
<div id="seven" class="section"><p>Seven</p>
</div>
<div id="eight" class="section"><p>Eight</p>
</div>
<div id="nine" class="section"><p>Nine</p>
</div>
</div>
I use ScrollTo and localscroll to navigate the site and I wonder how I can implement a parallax effect to the section wrapper and make the background move slower. Everywhere I look the parallax plugins and scripts is based on a scroll function, but since I dont use scroll to navigate I have no idea how to add the effect.
Is there a way to only adress the actual background-image, i.e. use .animate and/or .css to background-position property or should I put an element behind the section-wrapper? Im fairly new to jquery and javascript but if anyone could point me in the right direction i think i could figure it out. I have just have no idea where to start..
Attach this file to header of your site
https://github.com/markdalgleish/stellar.js/tree/master/src
initiate the script
<script type='text/javascript'>
<!--
(function($) {
$(document).ready(function() {
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
})(jQuery);
// -->
</script>
now you need to add the tag below to div that wraps the background
<div data-stellar-background-ratio="0.5">
You can update the value 0.5 - it defines the speed of background image.

jQuery: Gallerific Half Working

I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example

Categories