DEV Community: Chris

Drag & Drop Kitchen Mockup Scene with Intro Animation - vue.js , animate.css & www.mockupcloud.com

Chris — Tue, 03 Mar 2020 17:27:40 +0000

Download the Free scene from https://www.mockupcloud.com/free/kitchen-ready-header-free-scene

There are multiple layers, the shadow is a separate layer to blend with the background. Anything else is straightforward, having a draggable plugin that works with jQuery.

Adding some animation on loading and a centred text to stand out.

The button leads you to the download page.

It can be used as a nice landing page.

It works best on full screen

particle.js - Responsive Lush Green & Gold Bokeh with Hover Effect - Holding Page

Chris — Mon, 02 Mar 2020 14:27:09 +0000

Using particles.js to recreate a subtle green-gold bokeh effect It needs jquery as well. One of the layers is hoverable getting a bit more light while hovering the layer.

On mobile it will be replaced by a static image, to avoid a slow animation.

Best experience is on full screen

Draggable Craft Stationery Free Mockup Scene from mockupcloud.com

Chris — Fri, 28 Feb 2020 17:01:36 +0000

Download the Free scene from https://www.mockupcloud.com/free/art-craft-stationery-branding-mockup

It works best on full screen desktop view

There are multiple layers, the shadow is a separate layer to blend with the background. Anything else is straightforward, having a draggable plugin that works with jQuery.

Vertical Parallax Gallery

Chris — Fri, 28 Feb 2020 14:41:35 +0000

You can use this nice vertical gallery that has a logo parallax on the background of the image. The text itself is also moving with a delay. On Fullscreen it is a nice effect. Disabled on mobile as it was not tested the behaviours. The parallax had been deactivated for tablet and mobile but keeps responsive on tablet and mobile.

Builders Cards - component variations - for PX Partnership

Chris — Fri, 28 Feb 2020 13:40:19 +0000

These are some nice cards for navigating to other pages. If your website has 4 colors in the theme, it will work brilliantly.

Components for http://www.px-partnership.co.uk/

Mockup Editor with Scene

Chris — Fri, 28 Feb 2020 13:21:32 +0000

This is a good start for your mockup editor. Inspired by https://mockupeditor.com/

Neumorphic Boxes

Chris — Fri, 28 Feb 2020 13:17:07 +0000

The full article that inspired: https://uxdesign.cc/visual-trends-that-ui-designers-should-keep-an-eye-on-e622d9086310

More about neumorphism https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Layered Banner Slideshow with Mouse Effect

Chris — Fri, 28 Feb 2020 13:16:26 +0000

It is a mixture of a slideshow and parallax on mouse move.

Full Screen Vintage Frame with Multiple Borders

Chris — Fri, 28 Feb 2020 13:14:48 +0000

You would need to create multiple borders and put the extra decorations in the corners.

Draggable Isometric Branding Mockup Free Scene from mockupcloud.com

Chris — Fri, 28 Feb 2020 13:12:42 +0000

Download the Free scene from https://www.mockupcloud.com/free/isometric-branding-mockup-free-scene

There are multiple layers, the shadow is a separate layer to blend with the background. Anything else is straightforward, having a draggable plugin that works with jQuery.