{"id":3402,"date":"2021-04-03T13:38:17","date_gmt":"2021-04-03T13:38:17","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3402"},"modified":"2023-06-10T13:03:02","modified_gmt":"2023-06-10T13:03:02","slug":"js-tutorial-motion-hover-effect-for-a-background-image-grid","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-motion-hover-effect-for-a-background-image-grid\/","title":{"rendered":"JS Tutorial &#8211; Motion Hover Effect for A Background Image Grid"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; A short tutorial on how to achieve a motion hover effect on a background image grid.<\/p>\n<h2><a href=\"https:\/\/rengga.dev\/blog\/demo\/js\/image-grid-motion-effect\/\" target=\"_blank\" rel=\"noopener\"><strong>CLICK FOR DEMO<\/strong><\/a><\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ modules are defined as an array\r\n\/\/ [ module function, map of requires ]\r\n\/\/\r\n\/\/ map of requires is short require name -&gt; numeric require\r\n\/\/\r\n\/\/ anything defined in a previous bundle is accessed via the\r\n\/\/ orig method which is the require for previous bundles\r\nparcelRequire = (function (modules, cache, entry, globalName) {\r\n  \/\/ Save the require from previous bundle to this closure if any\r\n  var previousRequire = typeof parcelRequire === 'function' &amp;&amp; parcelRequire;\r\n  var nodeRequire = typeof require === 'function' &amp;&amp; require;\r\n\r\n  function newRequire(name, jumped) {\r\n    if (!cache[name]) {\r\n      if (!modules[name]) {\r\n        \/\/ if we cannot find the module within our internal map or\r\n        \/\/ cache jump to the current global require ie. the last bundle\r\n        \/\/ that was added to the page.\r\n        var currentRequire = typeof parcelRequire === 'function' &amp;&amp; parcelRequire;\r\n        if (!jumped &amp;&amp; currentRequire) {\r\n          return currentRequire(name, true);\r\n        }\r\n\r\n        \/\/ If there are other bundles on this page the require from the\r\n        \/\/ previous one is saved to 'previousRequire'. Repeat this as\r\n        \/\/ many times as there are bundles until the module is found or\r\n        \/\/ we exhaust the require chain.\r\n        if (previousRequire) {\r\n          return previousRequire(name, true);\r\n        }\r\n\r\n        \/\/ Try the node require function if it exists.\r\n        if (nodeRequire &amp;&amp; typeof name === 'string') {\r\n          return nodeRequire(name);\r\n        }\r\n\r\n        var err = new Error('Cannot find module \\'' + name + '\\'');\r\n        err.code = 'MODULE_NOT_FOUND';\r\n        throw err;\r\n      }\r\n\r\n      localRequire.resolve = resolve;\r\n      localRequire.cache = {};\r\n\r\n      var module = cache[name] = new newRequire.Module(name);\r\n\r\n      modules[name][0].call(module.exports, localRequire, module, module.exports, this);\r\n    }\r\n\r\n    return cache[name].exports;\r\n\r\n    function localRequire(x){\r\n      return newRequire(localRequire.resolve(x));\r\n    }\r\n\r\n    function resolve(x){\r\n      return modules[name][1][x] || x;\r\n    }\r\n  }\r\n\r\n  function Module(moduleName) {\r\n    this.id = moduleName;\r\n    this.bundle = newRequire;\r\n    this.exports = {};\r\n  }\r\n\r\n  newRequire.isParcelRequire = true;\r\n  newRequire.Module = Module;\r\n  newRequire.modules = modules;\r\n  newRequire.cache = cache;\r\n  newRequire.parent = previousRequire;\r\n  newRequire.register = function (id, exports) {\r\n    modules[id] = [function (require, module) {\r\n      module.exports = exports;\r\n    }, {}];\r\n  };\r\n\r\n  var error;\r\n  for (var i = 0; i &lt; entry.length; i++) {\r\n    try {\r\n      newRequire(entry[i]);\r\n    } catch (e) {\r\n      \/\/ Save first error but execute all entries\r\n      if (!error) {\r\n        error = e;\r\n      }\r\n    }\r\n  }\r\n\r\n  if (entry.length) {\r\n    \/\/ Expose entry point to Node, AMD or browser globals\r\n    \/\/ Based on https:\/\/github.com\/ForbesLindesay\/umd\/blob\/master\/template.js\r\n    var mainExports = newRequire(entry[entry.length - 1]);\r\n\r\n    \/\/ CommonJS\r\n    if (typeof exports === \"object\" &amp;&amp; typeof module !== \"undefined\") {\r\n      module.exports = mainExports;\r\n\r\n    \/\/ RequireJS\r\n    } else if (typeof define === \"function\" &amp;&amp; define.amd) {\r\n     define(function () {\r\n       return mainExports;\r\n     });\r\n\r\n    \/\/ &lt;script&gt;\r\n    } else if (globalName) {\r\n      this[globalName] = mainExports;\r\n    }\r\n  }\r\n\r\n  \/\/ Override the current require with this new one\r\n  parcelRequire = newRequire;\r\n\r\n  if (error) {\r\n    \/\/ throw error from earlier, _after updating parcelRequire_\r\n    throw error;\r\n  }\r\n\r\n  return newRequire;\r\n})({\"TNS6\":[function(require,module,exports) {\r\n\"use strict\";\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n  value: true\r\n});\r\nexports._getCache = exports._getSetter = exports._missingPlugin = exports._round = exports._roundModifier = exports._config = exports._ticker = exports._plugins = exports._checkPlugin = exports._replaceRandom = exports._colorStringFilter = exports._sortPropTweensByPriority = exports._forEachName = exports._removeLinkedListItem = exports._setDefaults = exports._relExp = exports._renderComplexString = exports._isUndefined = exports._isString = exports._numWithUnitExp = exports._numExp = exports._getProperty = exports.shuffle = exports.interpolate = exports.unitize = exports.pipe = exports.mapRange = exports.toArray = exports.splitColor = exports.clamp = exports.getUnit = exports.normalize = exports.snap = exports.random = exports.distribute = exports.wrapYoyo = exports.wrap = exports.Circ = exports.Expo = exports.Sine = exports.Bounce = exports.SteppedEase = exports.Back = exports.Elastic = exports.Strong = exports.Quint = exports.Quart = exports.Cubic = exports.Quad = exports.Linear = exports.Power4 = exports.Power3 = exports.Power2 = exports.Power1 = exports.Power0 = exports.default = exports.gsap = exports.PropTween = exports.TweenLite = exports.TweenMax = exports.Tween = exports.TimelineLite = exports.TimelineMax = exports.Timeline = exports.Animation = exports.GSCache = void 0;\r\n\r\nfunction _assertThisInitialized(self) {\r\n  if (self === void 0) {\r\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\r\n  }\r\n\r\n  return self;\r\n}\r\n\r\nfunction _inheritsLoose(subClass, superClass) {\r\n  subClass.prototype = Object.create(superClass.prototype);\r\n  subClass.prototype.constructor = subClass;\r\n  subClass.__proto__ = superClass;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; A short tutorial on how to achieve a motion <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-motion-hover-effect-for-a-background-image-grid\/\" title=\"JS Tutorial &#8211; Motion Hover Effect for A Background Image Grid\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":4406,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[325,330,264,263,103,227],"newstopic":[571],"class_list":{"0":"post-3402","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-background-effects","10":"tag-background-image-grid","11":"tag-javascript-tutorial","12":"tag-js-tutorial","13":"tag-web-design","14":"tag-web-designer","15":"newstopic-javascript"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3402"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3402\/revisions"}],"predecessor-version":[{"id":3405,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3402\/revisions\/3405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4406"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3402"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}