What do i need to create single page website like this? - javascript

I found this website and impressed on it https://kvellhome.com/
what technology do I need if I want to create a website like that
Is it Ajax? (I tried to remove some article but it can reload itself when I changed article back)
HTML5 history (I found that it can reach by direct link)

Ok, I think this can guide you to the right direction.
1- the homepage is a simple landing page that usese some animations to change colors and display text.
2 - when clicking on discover, it slides on the right and initialize a second slider that uses the projects's name as navigation dots (can easily be done using css pseudo elements using data attribute as content)
3 - you click on the project itself and it load a parallax page for that specific project.
Menu | contacts | about are pretty simple, they are pages on their own.
Some libraries you could possibly use:
fullscreenjs (to create the fullscreen pages and sliders. the home page can be the first slider and then on the second page you initialize a slider inside a slider (so that the animation to the right looks like the one on the website you provided)
animatecss to animate stuff
parallax for all the parallax effects
I think this is personal preference, but if I had to do a website like that, I will tackle it this way. Hope it helps

Related

Banner slider for wordpress without plugin

I would like to include banner slider that will fit properly on my site http://wwww.virmodrosti.com index page.
I tried to insert some codes I found on the internet but somehow ruined my entire page.
Question 1: Is jQuery or CSS alone is a better choice for slider?
Question 2: Where can I get easy slider without plugin for my wordpress theme?
I need a slider to be just below the line div id="content" on the main index page. I would like to insert an 1188px wide image because my main wrapper width is 1180px. All I want is a simple slider that has option for aorund 5 posts, that will be manually setup. That's why I ask for a good PHP or HTML code that will work with my wordpress theme.
.
Can you show me a Demo, what kind of slider you want. you can use slider Revolution For a simple slider.
This is a really good basic slider. http://kenwheeler.github.io/slick/
However, if you don't know how to develop your own plugin, then you are going to struggle to figure out how to control the content of the slider. Also if you are using someone elses code, isn't that just the same as using a plugin? Using a plugin means the code will be regularly updated, whereas if you use someone elses static code, then if it breaks you won't know what to do.

Sticky header with next and previous button

I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.

Using JS for multi-page mobile site

I'm building a large site (30+ pages) and wanting to use a centralized HTML page with 3 columns. I'd like the middle column to change depending on links clicked either via the left column (nav side bar) or a nav at the top of the page.
Here's a simple layout out of what I'm talking about (don't know why the middle section isn't going behind the left-panel though). https://jsfiddle.net/cxLcmfh8/
So, different .middle-panel objects are linked to a .left-panel nav element. The left nav would remain the same and the middle would fade in depending on which link is clicked.
I'm worried something like this would be too large for mobile users. Is there a way to build a large site with a setup like this without having to have mobile users basically download the entire site just to enjoy some neat transitions?
if data is not to large that wont create any difference if large than you should use server side scripting like PHP,JSP or servlet to generate response in same page and apply animation when page load.
or use AJAX to download data as and when required and apply transition. This method would not download all data and won't create over head it take time depending on net speed.

How do I make a paginator class move within 1 page (HTML & CSS)

I acquired the theme infusion from the internet. You can see examples of it here http://www.html5xcss3.com/2014/06/infusion-responsive-html5-theme.html
or a live preview here http://peterfinlan.com/infusion/
.. I am having problems making the paginator class move. Obviously when one of those elements is clicked it is supposed to move and show the rest of the team.
I realize the code on that theme just displays the 3 pages using that class and that no actual motion is available.
I want to know what needs to be done for that area to move in either direction when one of those elements are clicked.
Thanks!
You're looking for a slider or carousel in javascript or css - some options are here:
http://kenwheeler.github.io/slick/
http://owlgraphic.com/owlcarousel/
http://flexslider.woothemes.com/basic-carousel.html

How can I scroll multiple DIVs in a slide-bar using jQuery?

I am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.

Categories