I have the following page structure that I need to have sections scrolled to (using scrollify hopefully)
Hero video with background A (standard section)
- Section with text A and background B
- Section with text B and background B
- Section with text C and background B
Section with Image B (standard section)
Section with Image C (standard section)
Section with Image D (standard section)
I have the sections working using scrollify for the non italic sections above, but is it possible to add the three sections with different text and the same background? In a similar way to the layered example here (which seems to have no example code)?
https://projects.lukehaas.me/scrollify/examples/layered-scrolling/
So on each scroll between italic sections, the text is replaced from A to B to C, but the background stays the same as B each time? And then after that goes back to the standard flow..
Here is my scrollify code -
$.scrollify({
section: ".section_wrap",
sectionName: "section-name",
interstitialSection: "",
easing: "easeOutExpo",
scrollSpeed: 600,
offset: 0,
scrollbars: true,
standardScrollElements: ".section-approach .section-projects .section-team",
updateHash: false,
});
Other info - this is a wordpress site that also has bootstrap 5.
cheers
david
Related
I am creating a slider like using revolution slider
I tried to add text under these images
1) Select text html from layer
but it's always-on the background image. I want Text under image? How can I do that?
Similarly, I have set maximum visible item 7 from carousal settings and space -250, but now only 3 items visible
Please help me
You can use custom css class for test and add z indexes for text to take it on the image
Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.
I am trying to use the default templates available with CKEDITOR.So I choose the one where an image and text can be placed side by side i.e. the image is occupying a certain part of the editor and the text the remaining part(but on the same horizontal level.I hope you get my point).But when I paste an image into the image area(provided in the template) , the text automatically shifts itself towards the bottom of the image(i.e. now image and text are not on the same level anymore). This happens no matter whether the size of the area provided for the image is bigger or smaller than the image.
Can any one say why this is happening and how to solve it.
You can change the Image Alignment To get the text in the same horizontal level
Image Properties -> Image Info -> Alignment -> Left | Right
I want to create fixed szie page, without common scrollbar. Scrollbars have only two div's, where content content goes beyond of div (contend data and sidebar listing area) as on picture. I alreay did it without bs3, and use javascript (for calculate new offsets on page resize).
http://i.imgur.com/4kesDk7.jpg
Today I tried to create fixed size template with Bootrstrap3, but i can't do it. It's possible to do using bs3? Anybody can show how it is done?
I tried modify this code http://www.bootply.com/0FG70wcT3B. I do left and right headers.
I am using wordpress to build a portfolio website. I am currently showing the featured image of my post on the main blog and have a coloured overlay when rolling over/hovering the image, that changes according to the category the post is in. Currently I am doing that by using a transparent 1x1px image as background url() in my CSS resizing it to the size of the image.
What I would like to do is for the colour rollover to show all different category colours in stripes if a post is in multiple categories. For example if my categories and colours are the following...
Print Work - Green
Web - Red
Moving Image - Purple
...and I have a post that goes into 'Print work' and 'Web' the hover state should be half green and half red over the image. If a post is in all three categories the hover state should be in 3 colours (3 stripes – 1 green,1 red and 1 purple next to each other).
I haven't found any clue on whether that's possible in my searches and don't quite know where to start. Is this achievable at all and if so with using CSS only or Jquery?
You could do this by setting a container div overlay, lets call it .hover_div. This div will hold any / all of the color divs for the categories - let's call these .color_div. Make the categories for each post create another .color_div inside the .hover_div using a foreach loop.
Using Jquery, set the width for these divs witha percentage:
var colors = $(".color_div").length;
var color_width = 100/colors;
$(".color_div").width(color_width + "%");
This will make equal size color divs in the containser .hover_div. Give each of the color_divs another class name to target each and set a color.
You should be all set.