#interactjs
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
25% of US internet users with an annual income of $80-100K use Tumblr.
Note
HLW DID YOU GUESS THIUGH I WAS CONVINCED YOU DIDNT KNOW I EXISTED
I WAS . GOIGN THRU ALL MY MOKOTS N IFOUDN A FLAG KN UR BIO . THJE REST IS HRIOSTY (ALWSO . IKIK I DOMT KNOW MY SUTPDI FLAGS DONT EVEN LOOK AT ME) . HOKNESTLY I AHD NO IDEA UNTIL U SKAD U WERW SERBIAN </333333333
/BUT/ I DERINITLY KNWO U EXIIST I SEE U EVJERJY NOW N THJEM IN MY NOTES N IM LIJKW OMG TJHE TMF MOOT I ALMKST FOUGJT 2 THJE DEATH OVER HAILEY S HAIR COLOR !!! HJI !!! ^^
#IM SO OSRORY I HVHJENT PORPERLY INTERACTJED W U YET OTJHER THAN (SHUDDER)T HJE FREAKBLLR WAR#IM SJUT . SP BAD WITJH TALKIGN W MY MOOT S BUT KF U HMU ILL WELCOMW U W OEPN ARMS#ask#moots !! <3
1 note
·
View note
Text
How to Create a Draggable Element in Themes/Pages
Sometimes, we want to create ‘fun’ elements in our blog while retaining its functionality. Here, in this tutorial, I will share with you guys how to create a draggable element in themes/pages using interact.js with only three steps.
Here's the final result:
Static Preview
Example of a theme that uses interact.js (Qinni Han) - Try to drag the main links, left sidebar, and post :)
Do reblog and like as a sign of support! You can also join my theme selection survey as a sign of support too!
1. Copy the script below and paste it between <head> and <style type="text/css">:
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
2. Copy this script and paste it beneath </style>:
<script> const position = { x: 0, y: 0 } interact('.draggable').draggable({ listeners: { start (event) { console.log(event.type, event.target) }, move (event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) </script>
3. Now, at the <body> area where you would like it to be draggable, simply add draggable inside the said class.
Example!:
<!---Qinni Han's Left Sidebar--> <div class="kiriw draggable"> <div class="kiri"> </div> </div>
If you want to create a draggable image, simply add class="draggable" inside the <img> tag.
Example!:
<img src="https://static.tumblr.com/v6akjgz/r9Nqpdra0/45.jpg" class="draggable">
4. Done! Enjoy some interactivity in your blog!
Take note of the following matter:
Once you make it draggable, it would be impossible for people to highlight or copy the texts.
However, the users will still be able to click the link inside the draggable element.
If you disable [Save Image as...] by using the pointer-events, you cannot use this as the code shall override the script.
Related: Want to disable the [Save Image as...] without disabling the right click? Follow this tutorial!
Should you have any questions, let me know via message or FAQ.
27 notes
·
View notes
Text
Swipeable card stack using Vue.js and interact.js
Swipeable card stack using Vue.js and interact.js
I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: “Wordguru”) was to create a card game that anyone can play with their friends. You can see the outcome here.
One element of the development process was to create an interactive card stack. The card stack had a set of requirements, including:
It should contain a few…
View On WordPress
0 notes
Text
Project 1 - The Nitty Gritty
I started figuring out the initial content I wanted to include in my site - opting for a more technical proposal as opposed to a promotional site. I felt like this would leave me more room to discuss the technical reasonings and capabilities behind 4C.
I used Github for version control and Surge to host my site.
My process behind building the site is a little all over the place, I had a set style in my head for how I wanted to present my information, so I almost started building it before I had all my content. I eventually realised I need more imagery and text before I could continue working on it.
I made my clickable mockup in Adobe Experience Design, which gives you the option to embed the prototype in your website. I thought this would be a great way to give viewers a real feel of how 4C would work.
I also really wanted to experiment with some Javascript libraries that would allow to me create a modular interface - also knowing that I would eventually have to work out how to do it, I thought why not now?
So I looked at InteractJS and Packery, and eventually settled on Packery as I felt it had more context on the web. It took me about 3 hours, but I have a working prototype of the drag/drop functionality I want to achieve with 4C.
I definitely wanted to include more about harnessing the Metservice/BloomSky API options, but need to delve a little more into how these work, especially as I will want realtime weather information.
Overall, super happy with how my webpage turned out. I feel it really details the aesthetic and idea behind 4C.
Take a look: http://foresee.surge.sh
0 notes
Text
Project 1 - Planning the website
The following are bunch of my planning notes, some ramblings for the website content, and an article or two I found relevant/interesting. My progress on the making of the website can be found on the Github repository.
Name:
Foresee/4C
Features to include: - smooth scrolling - header resize on scroll - modular UI example - interactive XD mockup
Content:
Aims: To provide a weather forecast experience that is personal, local, and easy. To offer users the ability to customise their own interface.
Target Audience: Everyone.
Technical Construction: 4C will be built as a web application, meaning users will not have to download an app, so that it can be used on as many devices as possible. This means it will be built using HTML5, CSS3 and Javascript. It will harness relevant Javascript libraries such as InteractJS and Packery for the module functionality, as well as the APIs of Metservice and BloomSky to retrieve the weather data.
Visuals
Visual Direction - talk about colour scheme and font choices - Noto Sans good for big block text such as numbers and headings, Roboto good for paragraphs/lots of text
User Interaction Flowchart - whip up a quick diagram (including sign up/user on boarding process)
Customer Journey Map - recycle old diagram
Wireframes/Mockups
Statement of intent (app's intended functionality and target audience, context/situation in which the target audience might use the app)
Functionality: - Get device location as accurately as possible - Get Bloomsky/Metservice data for that location - Displays relevant, chosen data to the user
User groups: - anyone who wants to know the weather
Statement of intent: - 4C fetches your nearby weather, and then displays the forecast you choose to see. - 4C finds out your nearby weather, and then displays a custom forecast built just for you. - 4C displays your weather - your way.
Context 4C is a weather application that offers users the ability to customise their own interface. The problem with current weather applications is that they don’t display the information users actually want. On the contrary, weather websites often provide too much information, and it takes users too long to understand and process what they are seeing.
4C is targeting the gap in this market - allowing users to select the weather components that matter to them. The landing screen depicts a maximum of four weather components which can be changed at any time.
Modular interface - https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/
User Interaction Flowchart
User Personas
Customer Journey Plan
Modular Interface Functionality
- Modular design encourages us to think and design a UI and UX in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, we would start the design process by understanding how the UI system is structured and how its components can be used to create the user flow. - Modular design is about breaking down a design into small parts (modules), creating them independently, and then later combining them into a larger system. - This is great for consumers because they get to customize the system to fit their needs
Modular design requires breaking down a design into small parts (modules), designed each independently, and then later combining them into a larger system. Modular UI and UX patterns will be followed to create 4C.This means creating a structured UI system, and understanding how its components can be used to create the user flow. This will allow users to customise the interface to fit their needs.
Drag and drop the weather component modules to experience how 4C will utilise Packery and Draggabilly Javascript libraries to achieve a modular UI.
0 notes