From 1f6076c1b10120610e44d967c8944bd72bbccd09 Mon Sep 17 00:00:00 2001 From: arionarian Date: Wed, 8 Feb 2017 10:51:06 +0700 Subject: [PATCH] Cleaning Up * Remove gh-pages, use master branch as github page source * Update index.html source path * Update gulp compilation destination --- dist/index.html | 140 ------------------------------------ gulpfile.js | 6 +- index.html | 108 +++++++++++++++++----------- source/sass/style.scss | 6 +- dist/style.css => style.css | 6 +- 5 files changed, 77 insertions(+), 189 deletions(-) delete mode 100644 dist/index.html rename dist/style.css => style.css (96%) diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index 8547716..0000000 --- a/dist/index.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - jQuery Hover3d - - - - Fork me on GitHub - -
-
- -

jQuery Hover3d

- -
- -

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

- -

The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

- - -
-

Demo #1 Awesome tilt effect

- -

Simple hover effect for your project

-
-
-
- -
-

Project Name

- Photography -
-
-
- -
-
- -
-

Project Name

- Photography -
-
-
- -
-
- -
-

Project Name

- Photography -
-
-
- -
-
- -
-

Project Name

- Photography -
-
-
-
- -
-
-
-
-

Demo #2: AppleTv Icon

-

By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect

- - 
-$(".movie").hover3d({
-	selector: ".movie__card",
-	shine: true,
-	sensitivity: 20,
-});
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - - - - - - - - - \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 0a6c776..6b3740e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -68,7 +68,7 @@ gulp.task( 'css', function(){ .pipe( sass().on('error',sass.logError)) .on('error', function(){ this.emit( 'end' ) }) .pipe( autoprefixer({browsers: "last 4 version"}) ) - .pipe( gulp.dest("dist/") ) + .pipe( gulp.dest(".") ) .pipe( browserSync.stream() ); }); @@ -105,10 +105,10 @@ gulp.task( 'js', function(){ * with support of browsersync **/ gulp.task( 'default', function(){ - files = ["dist/**/*.html","dist/**/*.js"]; + files = ["./**/*.html","./**/*.js"]; browserSync.init(files,{ server:{ - baseDir: "dist/", + baseDir: ".", } }); gulp.watch( "./source/sass/**/*.scss", ["css"] ); diff --git a/index.html b/index.html index 776cc93..b356e32 100644 --- a/index.html +++ b/index.html @@ -3,22 +3,21 @@ jQuery Hover3d - + -
+ Fork me on GitHub
- +

jQuery Hover3d

@@ -27,54 +26,84 @@

jQuery Hover3d

The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

-
-
-

Demo 1

+
+

Demo #1 Awesome tilt effect

-

Simple hover effect for your project

-
-
-
- -
-

Project Name

- Photography -
+

Simple hover effect for your project

+
+
+
+ +
+

Project Name

+ Photography
- -
-
-

Demo 2

-

Creating AppleTV like icon

-
-
-
-
-
+ +
+
+ +
+

Project Name

+ Photography +
+
+
+ +
+
+ +
+

Project Name

+ Photography +
+
+
+ +
+
+ +
+

Project Name

+ Photography +
-
-
- +
+
+
+
+

Demo #2: AppleTv Icon

+

By enabling shine option, you can create appleTV icon like effect. Be creating multiple layer for creating depth effect

+ 
+$(".movie").hover3d({
+	selector: ".movie__card",
+	shine: true,
+	sensitivity: 20,
+});
+
+
+
+
+
+
+
+
+
+
+
+
- + -