jquery to create sliding page in one page? - javascript

this website combines many page in one page with sliding, does any body know which javascript or jquery library used for this site ?
http://www.ariansina.com/
Also if you have jquery code for this, I hope you post it as answer
thanks

I doubt you'll get the complete jQuery code for another guys hard work on stackoverflow.
But to get you started, here are a few jQuery libraries, that can accomplish this:
fullPage.js
jQuery OnePage Scroll
onePage scroll with animations
I think this one comes closest to what you need:
revealJS
And my favourite (I know, I shouldn't play favourites but it's just too impressive to ignore): impress.js

Related

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

Web image gallery - what has been used creating it?

I have met an interesting image gallery transition surfing the web several times and now I'm interested in how such an elegant solution has been made.
Gallery can be found here: http://nullstuff.com/nullfolio/#/portfolio
The desired effect takes place when toggling between 'Everything' and 'Web Design'.
Could it be made purely with CSS?
Based on the app.js source in the page, it's using the jQuery Quicksand plugin.
To create such elegant gallery JQuery can be used.
You can find several JQuery galleries.
Look at this blog, I found http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
I hope it helps.
First of all
It is not possible to add click events in css.
therefore it is javascript
This is known as an image carousel.
I made my own in jquery.
I can give you the source if you want.
Click on the image to see effect and see the url change and press back button.
You will find the previous page loaded with the effect.Moreover the scrollbar(horizontal) hides after poping which i think is made overflow-x:hidden in css.

Simple simple content slider

Can some one help?
I am looking for a content slider that can hold images and text and has dot navigation.
I have searched for so many on the net but nothing that is simple.
Guys honestly I have looked and looked, I looked at Questions that may already have been answered. I have also looked at the Similar Questions on the right hand side.
I have found this http://jsbin.com/uhowak/2 but i don't want it to whizz back to the first image i want it to be loop.
Please can someone help?
Thanks
You can try twitter bootstrap carousel
http://getbootstrap.com/javascript/#carousel
You can download it from this page
http://getbootstrap.com/
Unzip the file, you can either include the whole bootstrap library, which will be in
zipfile/dist/js/bootstrap.min.js
or just include the carousel only
zipfile/js/carousel.js
You will also need to include the jquery library for the bootstrap js to work
http://jquery.com/

Jquery Plugin qTip2 is this what is use on Hypem.com?

If you go to this website you will notice http://craigsworks.com/projects/qtip2/ qTip2 Jquery Plug (the green template theme) .. It is a project called qTip2 Jquery Plugin. It looks similar to http://hypem.com/ Jquery.
Is this what they used for audio player located on top. It looks like they used this Jquery and and implemented JavaScript into qTip2. I was looking to do something similar I noticed that there is 22 JavaScript, 2 CSS, 2 PHP and HTML. One reason to successfully code this, is because trying to achieve a player that hovers above and users can browse around the site and their music is not interrupted. I seen it done with I-frames but that is not going to be acceptable. If you have an Ajax example that would be terrific. I can't find any useful resources relating to an Ajax MP3 player that could be on the top panel. Do you think this will work , am I on the right track?
If you could please provide source code or any resources I would greatly appreciate. Thank you
If you can use html5 https://github.com/goldfire/howler.js that can then have your player in fixed position block element.

Categories