Okay, so I'm working on a project using JavaScript and the basic UI we want to be a very large background image, and when you select the navigation menu items it propels you to a section on that large image.
I've tried finding documentation on Viewports and trying to figure out how Map applications function but have had very very minimal success.
It would basically be a Google map without the user being able to slide it. How in the world would I begin to approach this?
You can set the background-image property in CSS and use javascript to change the background-position.
Related
I have an image gallery with a filtering function. I want to animate the shifting of the images when they get filtered. I read online about using framer motion's layout feature. I saw examples emulating exactly what I want to do like this one. When I set it up in my workspace it does not work, it does weird stretch animations and looks horrible. I created a code sandbox to demonstrate the issue. I would like to fix the animation so the tiles re-order properly. Any help would be appreciated thanks!
Guys I'm trying to recreate this site, just for a learning purpose,
and in the News section of the home page, there's this card with
a hover effect. Is it possible to pull out that just with css ?
I always end up with that slide out half behind the next card.
Different z-index on each card would work, it's just that last one
is sliding out in the 'wrong' direction.
Here's the sites link https://altar.io/
the website you're trying to re-create uses wow.js which generates animations with JS and CSS.
you can get it from here:
https://wowjs.uk/docs
you can check the library by just looking at the DIV element of each card. they contain a data attribute like data-wow-duration which is a wowjs library codes
Edit:
tl;dr What I have is a .png file of a horizontal bar and a .png file of a square button. I want to be able to add both images to a webpage and be able to slide the button along the rectangle. I know that it is possible to make range sliders in better ways but using the .png files is a hard requirement.
I have been tasked with taking an image of a range slider, adding it to a webpage, and make the slider interactive/draggable. I know that jQuery has its own sliders (https://jqueryui.com/slider/#multiple-vertical) but this does not seem to apply if you want to use an image of the range slider instead.
Example Image:
(source: dcrazed.com)
How can this be implemented? All the tutorials I see make the slider out of HTML/CSS/JS elements while I have separate images of the slider and draggable button.
FYI, the reason we're using an image is that it looks better than the standard sliders jQuery provides.
It may help if you search for "Form Range Input" or "RangeSlider JS" instead of slider to find a tutorial.
However I don't see any reason why this can't be accomplished more easily and more cleanly strictly through JS and CSS.
If you're having trouble visualising, try breaking your design into parts like so and save yourself the hassle of trying to make an image based design responsive. (Like we all have struggled with previously)
The slider knob itself is a rounded square with three squares inside it.
The slider bar is a rounded rectangle with another three squares placed inside it.
The information box is a div with text and a CSS triangle affixed to it.
The ticks themselves are trickier and will need to be added and removed dynamically with JS depending on their resolution, but their visual details only really need basic styling
If you still feel the need to use images and break the responsiveness of your website then have a look through some Codepens and see what others have done with similar requirements.
I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked
I am new to the whole Appcelerator world so I had a question:
Anybody is aware if appcelerator titanium provides slider functionality similar to this screenshot?
If not, what would be the first docs to look at?
No need for fancy animation or anything, just simplest transition.
I just need basic slider for titanium that has slide selectors looking like small circles (or something I could modify or adjust to custom needs).
Also, yes I'll use this as a startpoint
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Slider-object
But the page doesn't have screenshots of how the slider object looks and acts.
You want the ScrollableView control, with the paging component enabled.
http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object
For displaying such kind of progresbar or slider u have to create custom view and inside that custom view put as many as dots images as you have photos and just scrolling of each photos change dots image as per e.current / e.views ...
and set previous image to default image. and make it touch enabled = false.
ScrollableView control, with the paging.
link